Edited at

Typescriptのinterfaceの使い方

More than 1 year has passed since last update.


はじめに

インターフェース自体をあまり理解できていない為使い所がわからなかった。

そのこで、調べたことをまとめてみました。


インターフェースとは

中身の実装を持たず、メンバーや型の定義だけ持つ。

(よくわからない説明になってしまいました)


使い方


◎基本的な使い方

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を実装しているクラスは、同じメンバーが必ず存在することが保証される。

・関数の引数がオブジェクトの際に型を定義するのに便利。

・コンパイルの支援の為に存在する為、コンパイル後のソースには影響しない。