【TypeScript】インターフェースの基本

TypeScriptのインターフェースについて、基本的なことを学んだのでアウトプットします。

インターフェースとは

TypeScriptのインターフェースはクラスなどに対して、その機能を強制するために使われます。いわゆる実装のない型を定義しているものになります。

「実装のない型」といわれてもピンとこないと思いますので、実際にインターフェースがどのように使用されるのか以下の実装を参考にしてください。

インターフェースの書き方

インターフェースは以下のように記載します。

interface インターフェース名{ }

{ }の中には以下のことが可能です。

上記でわかるようにプロパティに値を記載したり、メソッドの中身を記載することはできません。

インターフェースの実装例

次に実装例を見てみます。以下のようにCarTypeのインターフェースがあります。①プロパティを記載し型を定義　②メソッドを定義し戻り値(void型の場合、書く必要はありません)を記載しています。

interface CarType{
  type: string,
  handle: string,
  capacity: number,
  drive():void;
}

型として使うインターフェース

次のようにCarTypeインターフェースを実装し変数car1、car2にはCarType型を設定しました。car1、car2共にCarTypeインターフェースの型通りの実装となっています。

interface CarType{
  type: string,
  handle: string,
  capacity: number,
  drive():void;
}

let car1:CarType;
let car2:CarType;

car1 = {
  type: 'SUV',
  handle: 'right',
  capacity: 6,
  drive(){
    console.log(this.type + 'を運転中です')
  }
}

car2 = {
  type: 'セダン',
  handle: 'right',
  capacity: 5,
  drive(){
    console.log(this.type + 'を運転中です')
  }
}

car1.drive(); //SUVを運転中です
car2.drive(); //セダンを運転中です

まとめ

インターフェースの基本的な使い方について書かせていただきました。初めは「型チェックとして使う」？といわれてもピンときませんでしたが、全体像がなんとなくわかってきた気がします。