サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

TypeScript入門 03: クラスを継承して使う


クラスを継承するとサブ(子)クラスは、スーパー(親)クラスのプロパティやメソッドを自らのものとして使えます。サブクラスを定めれば、スーパークラスの機能を拡張したり、使い途に応じたサブクラスをつくるなど、柔軟な開発ができるようになります。

01 サブクラスを定める

本稿は、「TypeScript入門 02: publicとprivateおよびstatic」で書いたコード002「クラスにプロパティやメソッドを加えたTypeScriptコード」に手を加えてゆきます。まず、クラス(Point)にprivate宣言したプロパティを、publicに変えましょう。キーワードprivateを消せば、デフォルトのpublicになります。けれど、publicはコンストラクタの引数に宣言することもできるのです。すると、つぎのようにプロパティへの代入も省いてしまえます。


class Point {
	// private x: number;
	// private y: number;

	constructor(public x: number, public y: number) {
		// this.x = x;
		// this.y = y;
	}

}

クラスを継承するには、サブクラス(Vector)のclassの定めに、つぎのようにキーワードextendsでスーパークラス(Point)を与えます。そして、サブクラスのコンストラクタ(constructor())は、関数super()でスーパークラスのコンストラクタを呼びださなければなりません。


class Vector extends Point {
	constructor(x: number, y: number) {
		super(x, y);
	}
}

これで、サブクラス(Vector)が定められました。まだ、サブクラス自らのプロパティもメソッドもありません。けれども、たとえばつぎのようにインスタンス(obj)をつくれば、スーパークラス(Point)のプロパティやメソッドが自らのものとして扱えます。ここまでのTypeScriptコードは、以下にまとめました(コード001)。


var obj: Vector = new Vector(1, Math.sqrt(3));
console.log(obj.getLength(), obj.getAngle() * Point.RAD_TO_DEG);  // 1.9999999999999998 59.99999999999999

コード001■サブクラスを定める


class Point {
	static RAD_TO_DEG: number = 180 / Math.PI;
	constructor(public x: number, public y: number) {
	}
	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);
	}
}
class Vector extends Point {
	constructor(x: number, y: number) {
		super(x, y);
	}
}

02 サブクラスにインスタンスメソッドを加える

サブクラスへのメソッドの加え方は、通常のクラスと変わりません。つぎのようにふたつのメソッドを加えましょう。座標への定数(スカラー)倍(scale())と加算(add())です。後者の引数(point)の型には、スーパークラス(Point)を与えました。もちろん、サブクラス(Vector)のインスタンスも渡せます。


class Vector extends Point {

	scale(scale): void {
		this.x *= scale;
		this.y *= scale;
	}
	add(point: Point): void {
		this.x += point.x;
		this.y += point.y;
	}
}

たとえば、つぎのコードでサブクラス(Vector)のインスタンス(obj)をつくると、サブクラスのインスタンスメソッド(scale()とadd())が呼び出せるとともに、スーパークラス(Point)のインスタンスメソッド(getLength()とgetAngle())も使えます。ここまでのサブクラスを定めたTypeScriptコードは以下にまとめました(コード002)。


var obj: Vector = new Vector(1, 0);
obj.scale(2);  // (2, 0)
obj.add(new Vector(-1, Math.sqrt(3)));  // (1, √3)
console.log(obj.getLength(), obj.getAngle() * Point.RAD_TO_DEG);  // 1.9999999999999998 59.99999999999999

コード002■サブクラスにインスタンスメソッドを加えた


class Point {
	static RAD_TO_DEG: number = 180 / Math.PI;
	constructor(public x: number, public y: number) {
	}
	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);
	}
}
class Vector extends Point {
	constructor(x: number, y: number) {
		super(x, y);
	}
	scale(scale): void {
		this.x *= scale;
		this.y *= scale;
	}
	add(point: Point): void {
		this.x += point.x;
		this.y += point.y;
	}
}

03 サブクラスに静的メソッドを加える

サブクラス(Vector)に静的メソッドを加えることもできます。やり方は、普通のクラスと同じです。原点(0, 0)からの距離と角度を引数に渡して、インスタンスが返されるメソッドにします。スーパークラス(Point)には、すでにこのような静的メソッド(polar())が備わっています。けれど、返されるのはスーパークラスのインスタンスですから、サブクラスのメソッドが使えません。そこで、同じ名前のつぎのような静的メソッド(polar())をサブクラスに加えました。座標計算は同じなので、スーパークラスの静的メソッドでつくったオブジェクトから取り出した座標により、サブクラスの新たなインスタンスをつくって返しています。


class Vector extends Point {

	static polar(length: number, angle: number): Vector {
		var point: Point = Point.polar(length, angle);
		return new Vector(point.x, point.y);
	}
}

これで、つぎのようにサブクラス(Vector)の静的メソッド(polar())でインスタンス(obj)がつくられ、サブクラスとスーパークラス(Point)どちらのメソッドも呼び出せます。TypeScriptコードは以下にまとめました(コード003)。なお、以下にサンプル001としてjsdo.itに書いたコードを掲げてあります。


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

コード003■サブクラスに静的メソッドを加えた


class Point {
	static RAD_TO_DEG: number = 180 / Math.PI;
	constructor(public x: number, public y: number) {
	}
	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);
	}
}
class Vector extends Point {
	constructor(x: number, y: number) {
		super(x, y);
	}
	scale(scale): void {
		this.x *= scale;
		this.y *= scale;
	}
	add(point: Point): void {
		this.x += point.x;
		this.y += point.y;
	}
	static polar(length: number, angle: number): Vector {
		var point: Point = Point.polar(length, angle);
		return new Vector(point.x, point.y);
	}
}

サンプル001■TypeScript: Definig a subclass and adding methods to it


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


Copyright © 2001-2016 Fumio Nonaka.  All rights reserved.