TypeScriptでタイプエイリアスを使用する方法
序章
動的で再利用可能なコードを作成することが重要です。 Do n’t-Repeat-YourselfルールまたはDRYは、TypeScriptでコードを作成するときに従うべき重要な原則です。 TypeScriptエイリアスを使用すると、これを実現するのに役立ちます。
このチュートリアルでは、文字列リテラルを使用してエイリアスを含めるコードをリファクタリングします。 TypeScriptエイリアスを使用して理解できるようになります。
前提条件
このチュートリアルを正常に完了するには、次のものが必要です。
- マシンにインストールされているTypeScriptの最新バージョン。 この新しいTypeScriptプロジェクトを設定する方法チュートリアルは、これを達成するのに役立ちます。
- 文字列リテラルの理解。 TypeScript文字列リテラルタイプに関するこの記事は、開始するのに最適な場所です。
ステップ1—文字列リテラルを使用する
文字列リテラルを使用すると、文字列を型として使用できます。 pet
という変数を作成し、文字列などの従来の型と同じに設定する代わりに、'cat'
を型として割り当てます。
let pet: 'cat';
pet
は'cat'
タイプであるため、'cat'
の値のみを取ります。 その他の値はerror
になります。
pet = 'cat'; // Ok
pet = 'dog'; // Compiler error
上記のコードスニペットでは、pet
を'dog'
に割り当てると、pet
の有効な値は'cat'
のみであるため、エラーが発生します。
文字列リテラルは、共用体型で使用するとさらに強力になります。 共用体型は、複数の型を持つことができる値を定義するために使用されます。 共用体タイプでは、|
文字を使用して、考えられるさまざまなタイプを区切ります。
let pet: 'cat' | 'dog';
pet
変数は、'cat'
または'dog'
のいずれかを値として使用できるようになりました。 pet
を他の文字列値に割り当てると、エラーが発生します。
pet = 'cat'; // Ok
pet = 'dog'; // Ok
pet = 'zebra'; // Compiler error
共用体タイプの詳細については、この記事を参照してください。
ただし、pet
自体はtype
ではありません。 それは変数です。 pet
をtype
として使用すると、エラーが発生します。
let gator: pet; // error: 'pet' refers to a value, but is being used as a type here
pet
は有効なタイプではないため、'cat' | 'dog'
タイプを再度繰り返す必要があります。 これにより、コードが不必要に繰り返される可能性があります。 タイプエイリアスを使用すると、これを解決できます。
ステップ2—タイプエイリアスを使用する
タイプエイリアスを実装するには、type
キーワードを使用して、新しいtype
を作成します。 type
を使用して、pet
をタイプとして宣言します。
type pet = 'cat' | 'dog';
type
を作成することにより、number
、文字列、またはプリミティブ型または参照型のいずれかであるかのように、コード内の任意の場所でpet
を使用できます。
let pet1: pet = 'cat';
let pet2: pet = 'dog';
pet
タイプの一部として宣言されていない値は、エラーになります。
let gator: pet = "horse"; // error
前の例では、文字列値とともにtype
を使用しました。 ただし、type
はどのタイプでも使用できます。
type num = 1 | 2; // number
type bool = true | false; // boolean
type obj = {a: 1} | {b: 2}; // object
type func = (() => string) | (() => void); // function
タイプエイリアスtype
の使用方法がわかったので、コードをより一般的で繰り返しの少ないものにすることができます。
結論
この記事では、TypeScriptタイプエイリアスを使用してコードをリファクタリングしました。 type
を使用すると、不必要に繰り返されないクリーンなコードを作成するのに役立ちます。
次のステップとして、ジェネリックスについて学習することで、TypeScriptの知識を次のレベルに引き上げることができます。 TypeScriptジェネリックスに関するこのの記事は、ジャンプするのに最適なリソースです。