TypeScript の型とインターフェイス

Type vs. Interfaceは、TypeScript で最も紛らわしく興味深いものの 1 つです。 私たちはその混乱を解消しようとします。

TypeScript は JavaScript の上に作成され、静的型が追加されます。 型を持つことは、開発者にとって素晴らしいことです。 型を書くのは大変ですが、長い目で見れば後悔することはありません。

TypeScript には、数値、文字列、ブール値などのすべての基本型があります。基本型に加えて、TypeScript を使用すると、カスタム型を作成し、型エイリアスとインターフェイスを使用してオブジェクトの外観を定義できます。 それぞれ。

タイプ エイリアスはタイプに他なりません。 カスタム名 (エイリアス) で型を作成すると、それは型エイリアスになります。

InterfacesとType Aliasesの基本的な構文を見てみましょう。

基本構文

インターフェース

インターフェイスは、 interfaceキーワードで宣言されます。 以下のインターフェースの構文を確認してください。

 interface InterfaceName { keyName: typeOfKey ... }

以下のサンプル例を見てください。

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

型エイリアス

型エイリアスはtypeキーワードを使用して宣言されます。 以下の型エイリアスの構文を確認してください。

 type TypeName = { keyName: typeOfKey; ... }

以下のサンプル例を見てください。

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

インターフェイスとタイプ エイリアスを使用してSiteのタイプを作成しました。 両方とも有効で、例に記載されているオブジェクト タイプに使用できます。 上記の例では構文のみが異なりますが、これは明らかです。

さらに多くのことを見つけるために、それらの違いを引き続き調べてみましょう。

タプル

TypeScript のタプルは、型指定された定義済みの長さの配列です。 各インデックスのタイプを定義します。

型エイリアスを使用してタプルを宣言できます。 しかし、インターフェースを使用してそれを行うことはできません。 型エイリアスでそれを行う方法を見てみましょう。

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

上記の例では、配列の各インデックス要素の型を定義しました。 配列に他の型を指定すると、TypeScript はエラーをスローします。

インターフェースでそれを行うことはできませんか?

型エイリアスで行うのとまったく同じように行うことはできません。 オブジェクト型にはインターフェイスが使用されます。 したがって、インターフェイスで使用するには、オブジェクト内にタプルが必要です。 例を見てみましょう。

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

コードを見ると、インターフェイス内にdetailsというタプルがあります。 したがって、インターフェース内でタプルを使用できます。

同様に、文字列、数値、ブール値などの単一の型に型エイリアスを使用できます。インターフェイスはオブジェクト型に使用されるため、型エイリアスのような単一の型に使用できます。

もう 1 つの興味深い点は、タイプ エイリアス タプルをinterfacesで使用できることです。 以下の例を確認してください。

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

次のことに取り掛かりましょう。

宣言のマージ – インターフェイス

宣言のマージは、TypeScript を使用して、同じ名前のインターフェイスの型をマージします。 より明確にするために例を見てみましょう。

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

上記のコードを見ると、同じ名前の Interface が 3 回宣言されています。 TypeScript コンパイラは、これら 3 つのフォームをすべて、同じ名前を持つインターフェイスからのすべての型を含む単一のオブジェクト型にコンパイルします。

geekflareオブジェクトからキーを 1 つ削除すると、宣言のマージを確認できます。 geekflareからキーの 1 つを削除すると、エラーが表示されます。

型エイリアスで同じことを行うことはできません。 ほとんどの人はその機能を使用しません。 一般に、同じ名前のインターフェースが複数あると混乱します。

タイプ エイリアス ファンは、このインターフェイスの機能について心配する必要はありません。

伸びる

型を宣言したとしましょう。 ここで、前の型の型とともに別の型を宣言します。 その場合、前の型を拡張できます。 インターフェイスと型エイリアスの両方でそれを行うことができます。

両方見てみましょう。

インターフェース

TypeScript のこのユース ケースにextendsというキーワードがあります。 これを使用してインターフェースを拡張します。 例を確認してみましょう。

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Site Interface を拡張してGeekflare Interface を作成しました。 Siteのすべてのタイプは、独自のタイプとともにGeeflareインターフェイスに存在します。 geekflare変数からnameキーを削除して確認できます。

次のように、複数のインターフェースを拡張できます。

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

楽しみのために、2 つ以上のインターフェースで拡張してみてください。 インターフェイスで型エイリアスを拡張することもできます。

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

上記の例では、1 つのタイプのみを拡張しました。 複数のインターフェイスを拡張する前の例と同様に、必要な数だけ拡張できます。

型エイリアスでそれを行う方法を見てみましょう。

型エイリアス

TypeScript の交差型を使用して型エイリアスを拡張できます。 例を見てみましょう。

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

交差点 (&)を使用して、 Geekflareタイプのfounderを含むSiteタイプを拡張しました。 エラーをスローするgeekflare変数からキーの 1 つを削除することでテストできます。

インターフェイスと同様に、次のように複数の型を拡張できます。

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

型エイリアスを拡張するインターフェースと同じように、型エイリアスを使用してインターフェースを拡張することもできます。 以下の例を確認してください。

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

型エイリアスとインターフェイスの組み合わせを拡張してみてください。

実装中

これは、インターフェイスと型エイリアスの違いではありません。 知っておくべきclassの機能。

クラスは、インターフェイスと型エイリアスの両方を同じ方法で実装できます。 両方の例を見てみましょう。

インターフェース

interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

型エイリアス

type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

注:覚えておくべきことの 1 つは、クラスで共用体 (|)または交差 (&)型を実装できないことです。

最後の言葉

記事でわかるように、型エイリアスとインターフェイスの両方を使用してすべてを行うことができます。 そのため、厳密にどちらが優れているとは言えません。 最後に、それらのいずれかを選択するのは個人的な選択です。 最終的には、それらを使用するスタイルを開発します。

次に、Typescript と Javascript の比較を確認できます。

ハッピーコーディング