TypeScript は、「 インターフェース ' また ' タイプ 」。インターフェイスはクラスまたはオブジェクトによって実装できますが、型エイリアスは、既存の型の新しい名前を作成するか、型の結合を定義するためにのみ使用できます。型とインターフェイスは頻繁に交換可能ですが、特定のシナリオにより適したものにする機能と構文には特定の違いがあります。
このブログでは、TypeScript のインターフェイスと型、およびそれらの違いについて説明します。
TypeScript インターフェイス vs タイプとは?
「 インターフェース ' と ' タイプ 」は、TypeScript でカスタム型を定義するために使用されます。ただし、機能と構文にはいくつかの違いがあります。インターフェイスと型の主な違いは、インターフェイスは新しい型を定義するのに対し、型エイリアスは定義しないことです。
インターフェースはクラスまたはオブジェクトによって実装できますが、型は共用体や交差などの機能を使用してより複雑な型を定義できます。一般に、オブジェクトの形状と API を定義するためにはインターフェイスがより一般的に使用され、複雑なデータ型とユーティリティ型を定義するには型がより一般的に使用されます。これらの両方を別々に理解しましょう。
TypeScript インターフェイスとは何ですか?
TypeScript インターフェースは、TypeScript オブジェクトの形状を定義する手法です。 「」というキーワードで作成されています。 インターフェース 」であり、オブジェクトがそのタイプとして分類されるために必要な一連の属性とメソッドを指定します。オブジェクト指向プログラミングのクラスに相当します。ただし、実装は定義されていません。インターフェイスは、主に型チェックと、オブジェクトが特定の構造に準拠していることを確認するために使用されます。
続行する前に、TypeScript ファイルを実行するには、JavaScript ファイルにトランスパイルしてから、指定されたコマンドを使用してターミナルで JavaScript コードを実行する必要があることに注意してください。
tsc ファイル名.tsノード filename.js
例
3 つの属性とメソッドを定義する「User」という名前のインターフェイスを作成します。 情報を取得（） 」：
インターフェイス ユーザー {firstName: 文字列;
姓: 文字列;
年齢: 番号;
情報を取得 ( ) ： 空所;
}
クラスを作る」 学生 インターフェースで継承されます。このクラスは、その属性、値を属性に割り当てるコンストラクター、および属性に関連する値を表示するメソッド「getInfo()」を定義します。
firstName: 文字列;
姓: 文字列;
年齢: 番号;
コンストラクタ ( firstName: 文字列、lastName: 文字列、age: 数字 ) {
this.firstName = firstName;
this.lastName = lastName;
this.age = 年齢;
}
情報を取得 ( ) ： 空所 {
console.log ( 「学生情報：」 )
console.log ( '- 名前： ' + this.firstName + ' ' + this.lastName ) ;
console.log ( '- 年： ' + this.age ) ;
}
}
「」のオブジェクトを作成する 学生 」という名前の「 標準 ' の ' ユーザー 「new」キーワードを使用してコンストラクターを呼び出して入力し、getInfo() メソッドを呼び出してコンソールにデータを出力します。
std.getInfo ( ) ;
出力
TypeScript 型とは
TypeScript 型は主に、既存の型のエイリアスを作成したり、より複雑な型を作成したりするために使用されます。データの特定の形状または構造を表します。 「」で定義/宣言できます タイプ 」キーワード。 TypeScript の型を使用して、コードをより理解しやすくし、繰り返し/重複を減らすことができます。
例
まず、タイプを定義します “ ユーザー 」を使用して タイプ 」 5 つのプロパティで指定されたキーワードのうちの 1 つはオプションの属性であり、「 電話 」：
タイプ ユーザー = {firstName: 文字列;
姓: 文字列;
年齢: 番号;
電子メール: 文字列;
電話?: 文字列;
} ;
「」という名前の関数を定義します getFullName 」、これは型「」のパラメーターを取ります ユーザー 」を含む個人情報からなるデータを印刷します。 名前 」、「 年 」、「 Eメール ' と ' 電話番号 」：
console.log ( 'ユーザー情報：' )
console.log ( '- 名前： ' + person.firstName + ' ' + person.lastName ) ;
console.log ( '- 年： ' + 人の年齢 ) ;
console.log ( '- Eメール： ' + person.email ) ;
console.log ( '-電話 ＃： ' + person.phone ) ;
}
次に、オブジェクトを作成します」 人 「タイプ」の ユーザー 」をキーと値のペアで:
ファーストネーム： 「ミリー」 、
苗字： 「マイケル」 、
年： 28 、
Eメール： 「mili124@yahoo.com」 、
電話： 「086-34581734」
} ;
最後に、関数 getInfo() を呼び出してユーザー情報を出力します。
出力
以上が、TypeScript のインターフェイスと型に関するすべてでした。
結論
タイプスクリプトでは、「 インターフェース ' と ' タイプ 」は、カスタム タイプの定義に使用されます。インターフェースはクラスまたはオブジェクトによって実装できますが、型は共用体や交差などの機能を使用してより複雑な型を定義できます。これらは、より整理されたスケーラブルなコードを記述するのに役立つ強力な機能です。このブログでは、TypeScript のインターフェイスと型、およびそれらの違いについて説明しました。