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

【TypeScript】クラスについて vol.2

2014年10月12日 / category : typescript

get / set

JavaScriptや、他の言語でもよく使用されるget/setですが、TypeScriptでも使えます。

TypeScript
class A{
	private _name:string;
	set name(_value:string){
		this._name = _value;
	}
	get name():string{
		return this._name;
	}
}

var a:A = new A();
a.name = 'tsudoi';
console.log( a.name );

こんな感じです。はい。

‘tsudoi’
が出力されます。

実は正しくコンパイルできるまで意外と躓きました・・・。

TypeScript
class A{
	private _name:string;
	set name(_value:string):void{
		this._name = _value;
	}
	get name():string{
		return this._name;
	}
}

setアクセサに:voidを付けるとコンパイルエラーになりました・・・。

TypeScript
class A{
	private _name:string;
	set name(_value:string){
		this._name = _value;
	};
	get name():string{
		return this._name;
	};
}

setアクセサ、getアクセサの最後にセミコロン(;)を付けるとコンパイルエラーになりました・・・。

JavaScript(Gruntfile.js)
options:{
    target: 'es5'
}

自分はgruntでコンパイルしているのですが、get/setは、optionsにtarget:’es5′を設定なければコンパイルできません。

クラスの継承

TypeScript
class A{
	private colorList:string[] = ['red', 'green', 'blue'];
	public color = (_index:number) => this.colorList[_index];
}

class AA extends A{}

var a:A = new A();
console.log( a.color(0) );

var aa:AA = new AA();
console.log( aa.color(2) );

クラスを継承するときは、extendsを使います。
上のコードは、クラスAAがクラスAを継承しています。
これで、クラスAAはクラスAの持っているプロパティ、メソッドを使用することができます。

クラスAAのインスタンスaaが、クラスAのcolorメソッドを実行しています。

クラスの継承 – コンストラクタ関数

TypeScript
class A{
	constructor(){
		console.log( 'constructor : class A' );
	}
}

class AA extends A{
	constructor(){
		console.log( 'constructor : class AA' );
	}
}

var aa:AA = new AA(); //コンパイルエラー

上のコードを実行すると、コンパイルエラーになります。
なぜでしょうか。

クラスAを継承したクラスAAには、コンストラクタ関数を設定できないようです。
では、どうするか。

TypeScript
class A{
	constructor(){
		console.log( 'constructor : class A' );
	}
}

class AA extends A{
	constructor(){
		super();
		console.log( 'constructor : class AA' );
	}
}

var aa:AA = new AA();

‘constructor : class A’
‘constructor : class AA’
が出力されました。

クラスAAにsuperを使用することで、コンストラクタ関数を実行することができました。
このsuperは、他の使い方もあります。

TypeScript
class A{
	public name(){ return 'class A'; }
}

class AA extends A{
	public name(){ return 'class AA'; }
	public parentName(){ return super.name(); }
}

var aa:AA = new AA();
console.log( aa.name(), aa.parentName() );

‘class AA class A’
が出力されました。

クラスAAのparentNameメソッドで、super.name()を返す処理を行っています。
ここのsuperは、クラスAを参照しています。super.name()とすることで、親クラスであるクラスAのnameメソッドを実行しています。

superを使用することで、親クラスのプロパティ、メソッドを参照することができることがわかります。

TypeScript
class A{
	//public name(){ return 'class A'; }
	public name = () => 'class A';
}

class AA extends A{
	public name(){ return 'class AA'; }
	public parentName(){ return super.name(); }
}

var aa:AA = new AA();
console.log( aa.name(), aa.parentName() ); //コンパイルエラー

ただし、メソッドをアロー関数式にするとコンパイルエラーが起こるようです。