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

型とインターフェイスは、 TypeScript で最も混乱し、興味深いものの 1 つです。私たちはその混乱を解消するよう努めます。

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

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

Type Alias は Type に他なりません。カスタム名 (エイリアス) で型を作成すると、それは型エイリアスになります。それ以外の何ものでもありません。

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

基本的な構文

インターフェース

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

 interface InterfaceName {
    keyName: typeOfKey
    ...
}

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

 interface Site {
    name: string;
    url: string;
    pagesCount: number;
}

const : Site = {
    name: '',
    url: 'https://.com/',
    pagesCount: 25
}

タイプエイリアス

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

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

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

 type Site = {
    name: string;
    url: string;
    pagesCount: number
}

const : Site = {
    name: '',
    url: 'https://.com/',
    pagesCount: 25
}

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

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

タプル

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

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

 type Site = [string, string, number]

const : Site = ['', 'https://.com/', 25]

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

インターフェースではできないのでしょうか？

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

 interface Site {
    details: [string, string];
    pagesCount: number;
}

const : Site = {
    details: ['', 'https://.com/'],
    pagesCount: 25,
}

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

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

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

 type Details = [string, string]

interface Site {
    details: Details;
    pagesCount: number;
}

const : Site = {
    details: ['', 'https://.com/'],
    pagesCount: 25,
}

次のことに移りましょう。

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

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

 interface Site {
    name: string;
}

interface Site {
    url: string;
}

interface Site {
    pagesCount: number;
}

const : Site = {
    name: 'Geeflare',
    url: 'https://.com/',
    pagesCount: 25,
}

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

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

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

エイリアス ファンと入力します。インターフェイスのこの機能については心配しないでください 😅。

伸びる

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

両方見てみましょう。

インターフェース

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

 interface Site {
    name: string;
    url: string;
    pagesCount: number;
}

interface  extends Site {
    founder: string;
}

const :  = {
    name: '',
    url: 'http://.com/',
    pagesCount: 25,
    founder: 'Chandan'
}

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

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

 interface FirstHalf {
    name: string;
}

interface SecondHalf {
    age: number
}

interface Person extends FirstHalf, SecondHalf {
    profession: string
}

const person: Person = {
    name: '',
    age: 7,
    profession: 'Helping Techies'
} 

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

 type Site = {
    name: string;
    url: string;
    pagesCount: number;
}

interface  extends Site {
    founder: string;
}

const :  = {
    name: '',
    url: 'http://.com/',
    pagesCount: 25,
    founder: 'Chandan'
}

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

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

タイプエイリアス

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

 type Site = {
    name: string;
    url: string;
    pagesCount: number;
}

type  = Site & {
    founder: string;
}

const :  = {
    name: '',
    url: 'http://.com/',
    pagesCount: 25,
    founder: 'Chandan'
}

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

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

 type FirstHalf = {
    name: string;
}

type SecondHalf = {
    age: number
}

type Person = FirstHalf & SecondHalf & {
    profession: string
}

const person: Person = {
    name: '',
    age: 7,
    profession: 'Helping Techies'
} 

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

 interface Site {
    name: string;
    url: string;
    pagesCount: number;
}

type  = Site & {
    founder: string;
}

const :  = {
    name: '',
    url: 'http://.com/',
    pagesCount: 25,
    founder: 'Chandan'
}

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

実装する

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

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

インターフェース

interface Site {
    name: string;
    url: string;
    pagesCount: number;
}

class  implements Site {
    name = ''
    url = 'http://.com/'
    pagesCount = 25

    constructor() {
        console.log(this.name, this.url, this.pagesCount)
    }
}

タイプエイリアス

type Site = {
    name: string;
    url: string;
    pagesCount: number;
}

class  implements Site {
    name = ''
    url = 'http://.com/'
    pagesCount = 25

    constructor() {
        console.log(this.name, this.url, this.pagesCount)
    }
}

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

最後の言葉

記事にあるように、型エイリアスとインターフェイスの両方を使用してあらゆることを行うことができます。したがって、一方が他方よりも優れているとは厳密には言えません。最終的には、その中からどれを選ぶかは個人の選択です。最終的には、自分なりの使用スタイルを確立することになります。

次に、Typescript と Javascript を比較してみましょう。

コーディングを楽しんでください 🙂