TypeScript インターフェース

2021 6/12

2020年8月5日 2021年6月12日

前回に引き続きTypeScriptについてのアウトプット。
今回はインターフェースについて。

ちなみに前回はTypeScriptの型の基本について書いた。

https://www.sunapro.com/typescript%e3%81%ae%e5%9e%8b%e5%9f%ba%e6%9c%ac/

インターフェースとは

オブジェクトの構造を定義し、それを型として利用できる。
typeとは異なり、具体的な値や初期値は入れられない。

このおかげでオブジェクトの構造を定義したいという意図が明確になる。
すぐにはオブジェクトを作らないが型だけ定義しておきたい場合などに使う。

インターフェースはTS独自のものなのでJSにはコンパイルされない。

typeとの違い

typeとの違いをもう少し詳しくみていく。

typeはUnion型なども定義できる。
interfaceはUnion型は定義できない。

より狭義になるため、オブジェクトの型を定義しているということが非常に明確になる。

型定義でインターフェースを指定した場合は、そのオブジェクトはインターフェースで定義してるプロパティを持つことが強制される。

下記の例はuserはGreetableのインターフェースの構造を持つことを保証している。
(つまり、userはnameプロパティとgreetメソッドを持つことを保証している)

implementsで特定のインターフェースに基づいたクラスを定義することができる。
そのクラスの中でインターフェースにはないageを追加可能。

userはGreetableインターフェースに基づいているが、同じくインターフェースに基づいたクラスによって作られているため、ageも持つことができる。

interface Greetable {
  name: string;

  greet(phrase: string): void;
}

class Person implements Greetable { //interfaceは1つのクラスに複数実装可能
  name: string;
  age = 30; // interfaceにはないプロパティを追加可能

  constructor(n: string) {
    this.name = n;
  }

  greet(phrase: string) {
    console.log(phrase + " " + this.name);
  }
}

let user: Greetable;
user = new Person("suna");
user.greet("I am"); // I am suna
console.log(user); // Person { age: 30, name: 'suna' }

これを下記のようにクラスを実装しないと、エラーになる

interface Greetable {
  name: string;
  
  greet(phrase: string): void;
}

let user: Greetable;

user = {
  name: "suna",
  age: 30, //インターフェースにないプロパティなのでエラー
  
  greet(phrase: string) {
    console.log(phrase + ' ' + this.name);
  }
}

インターフェースをimplementsしたクラスはインターフェースが持っている要素を引き継がなければならない。
つまり、インターフェースはそのクラスがインターフェースで定義した要素を持っていることを強制させることができる。

これによってuserというオブジェクトが何のクラスのオブジェクトかということは全く気にしなくて良くなる。

重要なのはGreetableであるオブジェクトを使っているということ。
これによりGreetableの中のメソッドが使えるということが保証される。

インターフェースではreadonlyは使える。
publicとprivateは使えない

インターフェースの継承

インターフェースはextendsで継承できる

interface Name {
  readonly name: string;
}

interface Greetable extends Name { //複数継承も可能
  greet(phrase: string): void;
}

Nameインターフェースはnameプロパティのみを持つ
Greetableインターフェースはnameプロパティとgreetメソッドを持つ

おわりに

今回はちょっと短いけどここまで。
業務でinterface使ってたけどtypeとの使い分けなんなんだろーって感じだったからスッキリした。

TypeScript使ってると何でもかんでも汎用的な物ってあんま好ましくないなーって感じる。

次回は交差型とか型キャストとかその辺について。

TypeScriptの型基本についてはこちら