TypeScript_インターフェース

インターフェース

implementsキーワード

implementsキーワードを使用して、インターフェースを実装します。

インターフェースを実装している場合、インターフェースに存在するメンバーと同じ名前のメンバーが

必ず存在している必要があります。


interface MyInterface{
  name: string;
  myMethod(): void;
}

class MyClass implements MyInterface {
  // メンバーがない場合コンパイルエラーとなります。
  name: string;
  myMethod () {
    console.log('implement');
  }
}

let obj: MyClass = new MyClass();
obj.myMethod();

関数パラメーターの定義

関数引数として、オブジェクトを渡す際にインターフェースを使用することができます。


interface MyParams {
  param1:string;
  param2:number;
  param3:boolean;
  param4:{key:string};
}

interface MyInterface {
  name: string;
  myMethod(params: MyParams): void;
}

class MyClass implements MyInterface{
  name: string;
  myMethod (params: MyParams) {
    console.log(params.param4['key']);
  }
}

let obj: MyClass = new MyClass();
let data = {
  param1: 'parameter',
  param2: 1,
  param3: false,
  param4: { 'key': 'value' },
};
obj.myMethod(data);

インターフェースの継承

extendsキーワード

インターフェースはクラス同様にextendsキーワードを使用して継承することができます。


interface MyParams {
  param1:string;
  param2:number;
}

interface SubParams extends MyParams {
  param3:boolean;
  param4:{key:string};
}

interface MyInterface {
  name: string;
}

interface SubInterface extends MyInterface {
  printName(): void;
}

class MyClass implements SubInterface{
  name: string;
  constructor (params: SubParams) {
    this.name = params.param4['key'];
  }
  printName () {
    console.log(this.name);
  }
}

let data = {
  param1: 'parameter',
  param2: 1,
  param3: false,
  param4: { 'key': 'value' },
};
let obj: MyClass = new MyClass(data);
obj.printName();

複数インターフェースを継承する。

インターフェース名をカンマで区切ることで複数のインターフェースを継承することができます。


interface Isample1 {
  name: string;
}

interface Isample2 {
  flag: boolean;
  print(): void;
}

class MyClass implements Isample1, Isample2 {
  name: string = 'multi implements';
  flag: boolean = true;
  print(): void {
    if (this.flag) {
      console.log(this.name)
    }
  }
}

let obj: MyClass = new MyClass();
obj.print();