Typescriptのinterfaceの使い方

  • 36
    いいね
  • 0
    コメント

はじめに

インターフェース自体をあまり理解できていない為使い所がわからなかった。
そのこで、調べたことをまとめてみました。

インターフェースとは

中身の実装を持たず、メンバーや型の定義だけ持つ。
(よくわからない説明になってしまいました)

使い方

◎基本的な使い方

implementsキーワードを使用して、インターフェースを実装します。
classの継承の時にextendsを使用するのと似てます。

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

interface MyInterface{
    name:string
}

class MyClass implements MyInterface{
    name:string;//このメンバーがない場合コンパイルエラーとなる。
}

インターフェースのメンバー全てがpublicとなる為、
アクセス修飾子がprivateの場合もコンパイルエラーとなる。

interface MyInterface{
    name:string
}

class MyClass implements MyInterface{
    private name:string;//コンパイルエラー
}

関数を指定する場合

interface MyInterface{
    getName():void;
    getDetail():{address:string};
}

class MyClass implements MyInterface{
    getName(){
    }
    getDetail(){
        return {
            address:'TOKYO'
        }
    }
}

◎関数のパラメーターをまとめて定義する

関数引数として、オブジェクトを渡す際にインターフェースを使用する。
インターフェースで設定したメンバーが、引数の値に存在しない場合はコンパイルエラーとなる。

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

function myFunc(params:MyParams){
}

myFunc({param1:'A',param2:123,param3:{key:'KEY'}});
myFunc({param1:'A',param2:123});//コンパイルエラーとなる

◎オブジェクトの型にinterfaceを利用する

オブジェクトの型定義としてインターフェースを利用することもできる。

interface MyIterface {
    name:string
}

var myObj:MyIterface = {name:'A'};
var myObj2:MyIterface;
var myObj3:MyIterface = 'A';//コンパイルエラーとなる。

◎配列の型にインターフェースを利用する

同じインターフェースを実装していれば、違うクラスでもまとめて扱うことができる。

interface MyIterface {
    name:string
}

class A implements MyIterface{
    name = "A";
}

class B implements MyIterface{
    name = "B";
}

class C implements MyIterface{
    name = "C";
}

var myArray:MyIterface[] = [new A(),new B(), new C()];

インターフェースの継承

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

interface MyIterface {
    name:string
}

interface SubInterface extends MyIterface{
    sex:string
}

class Myclass implements SubInterface {
    name = 'A';
    sex = 'B';
}

複数のインターフェースを実装する

インターフェースを実装する際に、インターフェース名をカンマで区切ると複数のインターフェースを実装できる。

interface MyIterface {
    name:string
}

interface SubInterface {
    sex:string
}

class Myclass implements MyIterface,SubInterface {
    name = 'A';
    sex = 'B';
}

interfaceのメリット

・同じinterfaceを実装しているクラスは、同じメンバーが必ず存在することが保証される。
・関数の引数がオブジェクトの際に型を定義するのに便利。
・コンパイルの支援の為に存在する為、コンパイル後のソースには影響しない。

  • この記事は以下の記事からリンクされています
  • typescriptのお勉強からリンク