TypeScriptでタイプエイリアスを使用する方法
序章
動的で再利用可能なコードを作成することが重要です。 Do n’t-Repeat-YourselfルールまたはDRYは、TypeScriptでコードを作成するときに従うべき重要な原則です。 TypeScriptエイリアスを使用すると、これを実現するのに役立ちます。
このチュートリアルでは、文字列リテラルを使用してエイリアスを含めるコードをリファクタリングします。 TypeScriptエイリアスを使用して理解できるようになります。
前提条件
このチュートリアルを正常に完了するには、次のものが必要です。
- マシンにインストールされているTypeScriptの最新バージョン。 この新しいTypeScriptプロジェクトを設定する方法チュートリアルは、これを達成するのに役立ちます。
- 文字列リテラルの理解。 TypeScript文字列リテラルtypesに関するこの記事は、始めるのに最適な場所です。
ステップ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';
The 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
、使用できます pet
まるでそれがそうであるかのようにあなたのコードのどこでも number
、文字列、またはプリミティブ型または参照型のいずれか:
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ジェネリックスに関するこのの記事は、ジャンプするのに最適なリソースです。