HTML5テクニカルノート

TypeScript入門 02: publicとprivateおよびstatic

ID: FN1609003
Technique: HTML5 / JavaScript
Package: TypeScript 2.0.3

TypeScriptはクラスのプロパティやメソッドに、外部からの参照を許さないようアクセスに制限が加えられます。また、インスタンスなしに、クラスから参照する静的なメソッドも定められます。それらの構文について、簡単なクラスを例にとってご説明しましょう。

01 クラスのプロパティやメソッドをprivateで定める

「TypeScript入門 01: Visual Studio CodeでTypeScriptのコードを書く」では、コード001「TypeScriptのコードでクラスを定めて試す」でつぎのようなクラス(Point)を定めました。


class Point {
	x: number;
	y: number;
	constructor(x: number, y: number) {
		this.x = x;
		this.y = y;
	}
}

クラスのインスタンスをつくれば、たとえばつぎのようにプロパティ(x)を参照できますし、値も自由に書き替えられます。


var obj: Point = new Point(3, 4);
console.log(obj.x);  // 3

プロパティ(xとy)に以下のようにprivateを宣言すると、クラスの外からは参照できなくなります。前掲コードと同じようにプロパティ(x)を参照すれば、ビルドのときつぎのようにクラス(Point)の中からしかアクセスできないというエラーが示されます。なお、private宣言がない場合、デフォルトでpublicとみなされ、外から参照できることになります。

Property 'x' is private and only accessible within class 'Point'.


class Point {
	private x: number;
	private y: number;
	constructor(x: number, y: number) {
		this.x = x;
		this.y = y;
	}
}

privateのプロパティは、クラスの中からは参照できます。ですから、クラスに加えたメソッドは、その本体でプロパティを参照して処理できるということです。メソッドは以下のコード001のように、名前(getLength())に続けて関数と同じかたちで定めます。キーワードfunctionは用いません。戻り値はメソッド名に続く括弧()の後、コロン(:)で型づけします。このメソッドは、インスタンスがもつ座標(x, y)のprivateプロパティにもとづき、原点(0, 0)からの距離を返します。つぎのようにクラス(Point)のインスタンス(obj)を参照してメソッドを呼び出せば距離の数値が戻ります。


var obj: Point = new Point(3, 4);
console.log(obj.getLength());  // 5

コード001■TypeScriptのコードでクラスを定めて試す


class Point {
	private x: number;
	private y: number;
	constructor(x: number, y: number) {
		this.x = x;
		this.y = y;
	}
	getLength(): number {
		var square: number = this.x * this.x + this.y * this.y;
		return Math.sqrt(square);
	}
}

private宣言は、以下のようにメソッドにも加えられます。こうすると、外からメソッドを呼び出せば、つぎのようなエラーが示されます。

Property 'getLength' is private and only accessible within class 'Point'.


class Point {

	private getLength(): number {

	}
}
var obj: Point = new Point(3, 4);
console.log(obj.getLength());  // 上記のエラーが示される

02 静的なメソッドとプロパティ

Mathクラスのメソッドは、インスタンスはつくらず、直接クラスを参照して呼び出します。そのような静的なメソッドやプロパティは、static宣言で定められます。前掲コード001のクラス(Point)に、つぎのようにstatic宣言して静的なメソッド(polar())を加えましょう。原点(0, 0)からの距離とx軸正方向となす角度を引数(lengthとangle)に渡して呼び出せば、その座標をプロパティにもった新たなインスタンスが返されます(距離と角度から座標を求めるやり方については「sinとcosは何する関数」参照)。


class Point {

	static polar(length: number, angle: number): Point {
		var x: number = length * Math.cos(angle);
		var y: number = length * Math.sin(angle);
		return new Point(x, y);
	}
}

つぎのように、クラス(Point)の参照に対してメソッド(polar())を呼び出すと新たなオブジェクトがつくられます。インスタンスのpublicなメソッド(getLength())で、原点から座標までの距離が確かめられるでしょう。なお、第2引数に渡す角度は、度数でなくラジアン値であることにお気をつけください(180° = πラジアン)。


var obj: Point = Point.polar(2, Math.PI / 3);
console.log(obj.getLength());  // 2

クラス(Point)にはさらにつぎのように、原点(0, 0)と座標のなす角度を返すメソッド(getAngle())も加えましょう。Math.atan2()メソッドに座標yとxを引数に渡して呼び出せば(引数の順序に注意)、ラジアン角が返されます。ラジアンでは値が確かめにくいので、ラジアンから度数への変換比率(180 /π)を静的なプロパティ(RAD_TO_DEG)に定めました。


class Point {

	static RAD_TO_DEG: number = 180 / Math.PI;

	getAngle(): number {
		return Math.atan2(this.y, this.x);
	}

}

ここまでの手を加えたTypeScriptコードは以下にまとめました(コード002)。つぎのコードを試すと、クラス(Point)の静的なメソッド(polar())でインスタンス(obj)がつくられ、座標の原点(0, 0)からの距離とx座標正方向となす度数角がインスタンスのメソッド(getLength()とgetAngle())で確かめられます。なお、以下にサンプル001としてjsdo.itに書いたコードを掲げてあります。


var obj: Point = Point.polar(2, Math.PI / 3);
console.log(obj.getLength(), obj.getAngle() * Point.RAD_TO_DEG);  // 2 59.99999999999999

コード002■クラスにプロパティやメソッドを加えたTypeScriptコード


class Point {
	private x: number;
	private y: number;
	static RAD_TO_DEG: number = 180 / Math.PI;
	constructor(x: number, y: number) {
		this.x = x;
		this.y = y;
	}
	getLength(): number {
		var square: number = this.x * this.x + this.y * this.y;
		return Math.sqrt(square);
	}
	getAngle(): number {
		return Math.atan2(this.y, this.x);
	}
	static polar(length: number, angle: number): Point {
		var x: number = length * Math.cos(angle);
		var y: number = length * Math.sin(angle);
		return new Point(x, y);
	}
}

サンプル001■TypeScript: public, private and static

作成者: 野中文雄
更新日: 2016年9月23日 TypeScriptのバージョンを2.0.3に更新。
作成日: 2016年9月11日