インターフェースとは

インターフェースとは、オブジェクトが持つべきプロパティ（変数）やメソッド（関数）を実装することを強制する、または実装済みであることを保証するために使う機能のこと。また、インターフェースを使うことで可読性や保守性が高くなる。

インターフェースの構文

interface Profile extends A, B { // extends で他のインターフェースの継承が可能
  // 変数
  name: string;

  // オプショナル。実装しなくてもよい
  message?: string;

  // 変更不可。初期化後は変更できない
  readonly id: number;

  // 関数。書き方は以下の二通り
  method(value: string): void;
  method: (value: string) => void;
}

インターフェースの定義と使い方

実装の強制

クラスがプロパティとメソッドを持つことを強制する。インターフェースのプロパティやメソッドをクラスが実装していないとリンターやコンパイラでエラーになる。

interface Converter {
  text: string;
  convert(): string;
}

// implements でインターフェースを指定して実装する
class TextUpperCase implements Converter {
  constructor(public text: string) {}
  convert(): string {
    return this.text.toUpperCase();
  }
}

const upperCase = new TextUpperCase("Hello World");
console.log(upperCase.convert()); // HELLO WORLD

実装の保証

インターフェースを型として使う。以下の TextUpperCase クラスは、根本的に TextUpperCase 型だけどインターフェースを実装していれば Converter 型でもある。なのでインターフェース Converter のプロパティやメソッドを絶対に持っていることになる。つまり実装されていることが保証される。

interface Converter {
  text: string;
  convert(): string;
}

class TextUpperCase implements Converter {
  constructor(public text: string) {}
  convert(): string {
    return this.text.toUpperCase();
  }
}

// プロパティやメソッドが実装されていれば Converter 型を名乗れる。
const upperCase: Converter = new TextUpperCase("Hello World");
console.log(upperCase.convert()); // HELLO WORLD

// もちろん関数の引数なんかでも同じ
function conversion(converter: Converter): string {
  return converter.convert();
}
const text = conversion(new TextUpperCase("Hello World"));
console.log(text); // HELLO WORLD

インターフェースの使いどころとメリット

使いどころ
- 以下のようにテキストを変換する機能を持つ同じようなクラスがあったとして、その実装を統一するのによく使う。
メリット
- 新たに TextCamelCase クラスや TextSnakeCase クラスを追加するといった場合に何を実装すべきかわかりやすい。例えば、それが数年後だったとしてもインターフェースを見れば一目瞭然だし、未実装だったらリンターやコンパイラが教えてくれる。
- IDEやエディタでコードの補完が効く。

interface Converter {
  text: string;
  convert(): string;
}

class TextUpperCase implements Converter {
  constructor(public text: string) {}
  convert(): string {
    return this.text.toUpperCase();
  }
}

class TextLowerCase implements Converter {
  constructor(public text: string) {}
  convert(): string {
    return this.text.toLowerCase();
  }
}

const upperCase: Converter = new TextUpperCase("Hello World");
console.log(upperCase.convert()); // HELLO WORLD

const lowerCase: Converter = new TextLowerCase("Hello World");
console.log(lowerCase.convert()); // hello world

Under construction

このブログを検索

TypeScript インターフェースの使い方