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

【TypeScript】クラスについて

2014年10月11日 / category : typescript

クラスについて、まとめてみます。
クラスとは・・・というのは、割愛します。
クラスの記述方法について、詳しく書いてみます。
と言っても、簡単です。

まず、クラスを生成してみます。

TypeScript
class A{}

素晴らしい。簡単。
本当にこれだけ?
クラスAのインスタンスを生成してみます。

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

‘A {}’
と出力される。
大丈夫っぽい。

クラスには大きく分けて、プロパティ、メソッド、コンストラクタ関数というものがあります。
まず、コンストラクタ関数とは、なんだ?
簡単に言うと、インスタンスが生成されるときに実行される関数です。

TypeScript
class A{
	constructor(){
		console.log('コンストラクタ関数');
	}
}
var a:A = new A();

‘コンストラクタ関数’
と出力される。コンストラクタ関数が実行されています。

これが、コンストラクタ関数です。
インスタンスの初期設定などは、コンストラクタ関数で実行することが多いです。

次、プロパティですが、

TypeScript
class A{
	name:string;
	constructor(){
		this.name = 'tsudoi';
	}
}
var a:A = new A();
console.log( a.name );

name
これが、プロパティです。
クラス内のコンストラクタ関数やメソッドではthis.nameで参照します。
インスタンスでは、a.nameで参照できます。

ちなみに、

var name:string;

と、var宣言できませんので、ご注意を。

次に、メソッドですが、

TypeScript
class A{
	name:string;
	constructor(){
		this.name = 'tsudoi';
	}
	setName = (_name:string):void => { this.name = _name; };
	getName = ():string => this.name;
}
var a:A = new A();
a.setName('yoshimoto');
console.log( a.getName() );

setNameメソッド, getNameメソッドを設定してみました。
setNameメソッドで、nameプロパティを設定し、
getNameメソッドで、nameプロパティを取得しています。

ちなみに、メソッドはアロー関数式が使えますが、コンストラクタ関数は使えませんので、ご注意を。
あ、引数は使えます。

TypeScript
class A{
	name:string;
	age:number;
	constructor(_name:string, _age:number){
		this.setName(_name);
		this.setAge(_age);
	}
	setName = (_name:string):void => { this.name = _name; };
	getName = ():string => this.name;
	setAge = (_age:number):void => { this.age = _age; };
	getAge = ():number => this.age;
}
var a:A = new A('tsudoi', 33);
console.log( a.getName(), a.getAge() );

ageプロパティ、setAgeメソッド、getAgeメソッドを追加しました。
コンストラクタ関数に引数を設定し、setNameメソッド、setAgeメソッドを実行しています。
これで、生成したタイミングで、nameプロパティとageプロパティに値が代入されます。

‘tsudoi 33′
が出力されます。
getNameメソッド、getAgeメソッドでそれぞれのプロパティが取得できているのがわかります。

これで、クラスの構成、コンストラクタ関数、プロパティ、メソッドの記述方法がわかったと思います。
それではもう少し踏み込んでみましょう。

プロパティ、メソッドに対し、参照を制御することができます。
クラスの外からは参照させたくない場合、’private’を追加します。
参照できるようにする場合は、’public’を追加します。
省略した場合は、’public’となります。

それでは上のコードに対し、’private’, ‘public’を設定してみます。

TypeScript
class A{
	public name:string;
	private age:number;
	constructor(_name:string, _age:number){
		this.setName(_name);
		this.setAge(_age);
	}
	public setName = (_name:string):void => { this.name = _name; };
	public getName = ():string => this.name;
	private setAge = (_age:number):void => { this.age = _age; };
	public getAge = ():number => this.age;
}

var a:A = new A('tsudoi', 33);

console.log( a.name );
console.log( a.age ); //コンパイルエラー

a.setName('yoshimoto');
console.log( a.getName() );

a.setAge(10); //コンパイルエラー
console.log( a.getAge() );

ageプロパティ、setAgeメソッドをprivateとしました。
インスタンスaから参照ができなくなりました。(コンパイルエラー)
publicを設定したプロパティ、メソッドは問題なく参照できます。

これが、’private’, ‘public’の仕組みです。

最後にもうひとつ、static(スタティック)という仕組みを解説します。

TypeScript
class B{
	static message:string = 'hello!';
}

クラスBに、messageプロパティを設定し、staticとしました。
これを参照してみます。

TypeScript
class B{
	static message:string = 'hello!';
}

var b:B = new B();
console.log( b.message ); //コンパイルエラー

コンパイルエラーになりました。
参照ができないようです。

staticを付けることで、その要素はインスタンスではなく、クラス自身の要素になります。
そのため、staticを付けたプロパティを参照するには、次のようになります。

TypeScript
class B{
	static message:string = 'hello!';
}

console.log( B.message );

staticは、プロパティだけでなく、メソッドにも設定することができます。
次のコードを見てみます。

TypeScript
class B{
	static message:string = 'hello!';
	static getClassMessage(){
		return this.message;
	}
	public getInstanceMessage(){
		return B.message;
	}
}

var b:B = new B();
console.log( B.getClassMessage() );
console.log( b.getInstanceMessage() );

staticなプロパティを参照するとき、staticなメソッド内では、thisになります。
それ以外のメソッドでは、B(クラス名)になります。

ただし、メソッドをアロー関数式で記述した場合は、

TypeScript
class B{
	static message:string = 'hello!';
	static getClassMessage = () => B.message;
	public getInstanceMessage = () => B.message;
}

var b:B = new B();
console.log( B.getClassMessage() );
console.log( b.getInstanceMessage() );

staticなメソッド内でも、B(クラス名)で参照することになるようです。
(ん~、ややっこしいですね・・・)

もちろん、staticな要素にもprivate, publicを設定することができます。

TypeScript
class C{
	public static color:string = 'red';
	private static size:number = 10;
}
console.log( C.color );
console.log( C.size ); //コンパイルエラー

C.sizeは、privateな要素なので、コンパイルエラーです。

以上が、クラスについてでした!