吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】インタフェースについて

2014年10月12日 / category : typescript

インタフェースについて、まとめてみます。
と言っても・・・、インタフェースの仕組みについては、少々自信がありません。
というのも、以前Flashクリエータとして活動していた頃は、ActionScriptでクラスベースの言語を学んできましたが、インタフェースに関してはあまり触れてきませんでした。
自身の勉強含め、ここでまとめてみます。

インタフェース – 記述方法

インタフェースとは、クラス設計書のようなものです。
生成するクラスに必要なプロパティ、メソッドを定義するだけで実装はできません。あくまで定義だけです。
次のコードを見てみます。

TypeScript
interface IPlan{
	name:string;
	price:number;
	getPlanName():string;
	getPlanPrice():number;
}

インタフェースを生成するには、

interface + インタフェース名{}

という構文で記述します。
インタフェース名については、頭に「I」を付けるのが一般的らしいです。
上のコードは、

nameプロパティ
priceプロパティ
getPlanNameメソッド
getPlanPriceメソッド

の4つの要素を定義したインタフェースとなります。

TypeScript
interface IPlan{
	name:string = 'メインプラン'; //コンパイルエラー
	price:number;
	getPlanName():string;
	getPlanPrice():number;
}

インタフェースは定義だけですので、初期値として値を代入することもできません。
上のコードは、nameプロパティに初期値’メインプラン’を代入していることで、コンパイルエラーとなってしまいます。

それではこのインタフェースの定義を実装するクラスを生成してみます。

TypeScript
interface IPlan{
	name:string;
	price:number;
	getPlanName():string;
	getPlanPrice():number;
}

class MainPlan implements IPlan{
	public name:string;
	public price:number;
	constructor(_name:string, _price:number){
		this.name = _name;
		this.price = _price;
	}
	public getPlanName(){ return this.name; }
	public getPlanPrice(){ return this.price; }
}

var mainPlan:MainPlan = new MainPlan('メインプラン', 1980);
console.log( mainPlan.getPlanName(), mainPlan.getPlanPrice() );

‘メインプラン 1980′
が出力されました。正しく動作しています。

インタフェースで設計したクラスを実装するには、

class クラス名 implements インタフェース名{}

という構文になります。

TypeScript
class MainPlan implements IPlan{
	public name:string;
	public price:number;
	public date:string = '2014.10.13';
	constructor(_name:string, _price:number){
		this.name = _name;
		this.price = _price;
	}
	public getPlanName(){ return this.name; }
}

上のコードは、コンパイルエラーになります。
IPlanで設計したgetPlanPriceメソッドが、実装されたクラスMainPlanで定義されていません。
インタフェースで定義した要素は、実装するクラスには全て必要となります。
ただし、dateプロパティのように、インタフェースにはなく、クラスにはある要素に関しては問題ないようです。

インタフェース – 継承

インタフェースは、クラスと同様に継承ができます。
次のコードを見てみましょう。

TypeScript
interface IFont{
	color:string;
	size:number;
	getColor():string;
	getFontSize():number;
}

interface IText extends IFont{
	text:string;
	align:string;
	getText():string;
	getTextAlign():string;
}

class Title implements IText{
	public color:string;
	public size:number;
	public text:string;
	public align:string;
	constructor(_color:string, _size:number, _text:string, _align:string){
		this.color = _color;
		this.size = _size;
		this.text = _text;
		this.align = _align;
	}
	public getColor(){ return this.color; }
	public getFontSize(){ return this.size; }
	public getText(){ return this.text; }
	public getTextAlign(){ return this.align; }
}

var tit:Title = new Title('red', 12, 'タイトル', 'left');
console.log( tit.getText(), tit.getColor() );

‘タイトル red’
が出力されます。

getColorメソッドは、継承しているIFontで定義したメソッドです。
実装したTitleクラスで問題なく使用できているのがわかります。