TypeScript のインターフェイスとクラス

Shuvayan Ghosh Dastidar 2023年1月30日
  1. TypeScript のクラスとインターフェイスの違い
  2. TypeScript でクラスとインターフェイスを使用する場合
TypeScript のインターフェイスとクラス

TypeScript は強く型付けされた言語であり、複雑でプリミティブな型をサポートします。これは JavaScript プログラミング言語のスーパーセットであり、その結果、オブジェクト指向プログラミング(OOP)の概念や関数型プログラミングの概念など、JavaScript に存在するさまざまな機能も備えています。

TypeScript は、大規模なコードベースを持つ組織にとって非常に便利です。TypeScript は、誤って推論された型の JavaScript の場合に避けられない実行時エラーを防ぐのに役立ちます。

TypeScript をサポートする適切なツールと IDE は、ユーザーまたは TypeScript コンパイラによって推測されたタイプによって定義されたさまざまなインターフェイスを介して、コードの補完を提案したり、タイプのエラーを検出したり、エラーを自動的に修正したりできます。

このチュートリアルでは、クラスとインターフェイスの違いに焦点を当て、データをモデル化するためにどちらを使用するかを示します。

TypeScript のクラスとインターフェイスの違い

クラスは基本的に、さまざまなプロパティとメソッドが関連付けられたさまざまなオブジェクトの実装を保持するために必要です。クラスには初期化されたプロパティがあり、その中にさまざまなメソッドの実装があり、さまざまなオブジェクトを初期化または作成するために使用できます。

インターフェイスは、オブジェクトに対応するさまざまな属性のタイプ情報を保持するためにのみ使用されます。これは通常、型チェックに使用されるため、実行時エラーを防止し、オブジェクトのインスタンス化には使用できません。

class Animal {
    name : string;
    eyes : number;

    constructor( name : string, eyes : number) {
        this.name = name;
        this.eyes = eyes;
    }

    getName() : string {
        return this.name;
    }

    getEyes() : number {
        return this.eyes;
    }
}

上記のコードブロックは、Animal クラスに関連付けられたさまざまな属性の青写真を含み、いくつかのメソッドを持つ TypeScript クラスの実装を示しています。同じデータをインターフェースを使用してモデル化できます。

interface Animal {
    name : string;
    eyes : number;

    getName : () => string;
    getEyes : () => number;
}

したがって、インターフェイスによれば、インターフェイスを実装するオブジェクトの型チェックのすべての可能性がありますが、クラスとは異なり、クラスのプロパティを初期化する方法がなく、クラス内の関数の実装を持つことはできません。

TypeScript でクラスとインターフェイスを使用する場合

クラスは、デフォルト値、さまざまなメソッド実装を含むオブジェクトブループリントとして、または new キーワードを使用して同じクラスのさまざまなインスタンスを作成するときに使用されます。さらに、クラスを使用すると、TypeScript コンパイラによって削除されたインターフェイスとは異なり、コードは実行時にスペースを占有します。

クラスには、インターフェースとは異なり、クラスに初期化コードを追加し、データ変数を初期化するためのコンストラクターがあります。

したがって、クラスは、オブジェクトを作成する必要があり、多くの場合、拡張する必要があり、初期化ロジックをアタッチする必要がある複雑なデータモデルを表すために使用されます。

一方、インターフェイスは、オブジェクトに関連付けられた属性のタイプのみで構成される単純なデータモデリングを行うために使用されます。

また、一部のクラスのデータインターフェイスとしても機能します。たとえば、クラス TigerAnimal を実装します-クラス Tiger は、インターフェイス Animal に存在するのと同じ属性を持つすべての型チェックをサポートします。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

関連記事 - TypeScript Class

関連記事 - TypeScript Interface