600
437

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Typescriptのinterfaceの使い方

Last updated at Posted at 2015-10-22

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

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

##使い方

###◎基本的な使い方
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を実装しているクラスは、同じメンバーが必ず存在することが保証される。
・関数の引数がオブジェクトの際に型を定義するのに便利。
・コンパイルの支援の為に存在する為、コンパイル後のソースには影響しない。

600
437
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
600
437

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?