HTML5テクニカルノート

TypeScript入門 11: 名前空間ー namespace

ID: FN1611001
Technique: HTML5 / JavaScript
Package: TypeScript 2.0

TypeScriptではクラスやインタフェースなどの宣言を名前空間に定められます。その考え方と使い方について、かいつまんでご説明します。なお、これまでは内部モジュールと称されていました。ECMAScript 2015の用語にしたがって名前空間(namespace)と改められたもので、これからはモジュールは外部モジュールと呼ばれていた仕組みを指すことになります(「TypeScript入門 10: モジュールー exportとimport」参照)。

01 namespaceで名前空間を定める

exportするクラスやインタフェースなどの宣言を名前空間に定めると、名前空間で分類することができ、また他のライブラリと名前の重複が防げます。export宣言をつぎのように、キーワードnamespaceに添えた名前空間の{}内に書きます。すると、「名前空間.宣言」のかたちで参照できます。

namespace 名前空間 {
export 宣言
}

つぎのコードの抜書きは、インタフェース(IPoint)を名前空間(geom)に定めました。

IPoint.ts


namespace geom {
	export interface IPoint {
		x: number;
		y: number;
	}	
}

インタフェースを実装するクラス(Point)は、つぎのように名前空間を添えて(geom.IPoint)参照します。また、importは用いず、referenceタグでファイルの依存関係をコンパイラに示します(importする場合には、名前空間をexportしておかなければなりません)。

Point.ts


/// <reference path="./IPoint.ts" />
export class Point implements geom.IPoint {
	constructor(public x: number = 0, public y: number = 0) {
	}
}

つぎのテスト用のコードを試すと、クラス(Point)のインスタンスがつくられて、コンソールに表示されます。

sample.ts


import {Point} from './Point';
let point: Point = new Point(3, 4);
console.log(point);  // Point { x: 3, y: 4 }

02 複数のモジュールに同じ名前空間を与える

複数のモジュールに同じ名前空間を与えることもできます。そうすると、それらのモジュールを名前空間で分類してまとめられます。たとえば、前掲のインタフェース(IPoint)を実装したクラス(Point)も、つぎのように同じ名前空間(geom)に定めることができます。

Point.ts


/// <reference path="./IPoint.ts" />
namespace geom {
	// export class Point implements geom.IPoint {
	export class Point implements IPoint {
		constructor(public x: number = 0, public y: number = 0) {
		}

すると、テスト用のコードもクラスに名前空間を添えて(geom.Point)参照することになります。

sample.ts


/// <reference path="./Point.ts" />
let point: geom.Point = new geom.Point(3, 4);
console.log(point);

なお、複数のモジュールに同じ名前空間を与えたときは、HTMLドキュメントに<script>要素でJavaScript(JS)ファイルを読み込んで試してください。


<script src="IPoint.js" type="text/javascript" /script>
<script src="Point.js" type="text/javascript" /script>
<script src="sample.js" type="text/javascript" /script>

以下のコード001は、「TypeScript入門 10: モジュールー exportとimport」コード001「3つのモジュールのexportとimportの指定」のモジュールに同じ名前空間(geom)を与えました。つぎのテスト用のコードを試すと、座標(1, √3)の原点からの距離(2)およびx軸の正方向となす角度(60)がコンソールに示されます。


/// <reference path="./Point.ts" />
/// <reference path="./Vector.ts" />
let point: geom.Vector = new geom.Vector(1, Math.sqrt(3));
console.log(point.length, point.angle * geom.Point.RAD_TO_DEG);
1.9999999999999998 59.99999999999999

コード001■3つのモジュールをひとつの名前空間に定める

IPoint.ts


namespace geom {
	export interface IPoint {
		x: number;
		y: number;
	}	
}

Point.ts


/// <reference path="./IPoint.ts" />
namespace geom {
	export class Point implements IPoint {
		constructor(public x: number = 0, public y: number = 0) {
		}
		get length(): number {
			var square: number = this.x * this.x + this.y * this.y;
			return Math.sqrt(square);
		}
		set length(length: number) {
			var point: IPoint = Point.getPolar(length, this.angle);
			this.x = point.x;
			this.y = point.y;
		}
		get angle(): number {
			return Math.atan2(this.y, this.x);
		}
		set angle(angle: number) {
			var point: IPoint = Point.getPolar(this.length, angle);
			this.x = point.x;
			this.y = point.y;
		}
		static get RAD_TO_DEG(): number {
			return 180 / Math.PI;
		}
		static polar(length: number, angle: number): Point {
			var point: IPoint = Point.getPolar(length, angle);
			return new Point(point.x, point.y);
		}
		protected static getPolar(length: number, angle: number): IPoint {
			var x: number = length * Math.cos(angle);
			var y: number = length * Math.sin(angle);
			return {x: x, y: y};
		}
	}
}

Vector.ts


/// <reference path="./IPoint.ts" />
/// <reference path="./Point.ts" />
namespace geom {
	export class Vector extends Point {
		constructor(x: number = 0, y: number = 0) {
			super(x, y);
		}
		scale(scaleX: number, scaleY?: number): void {
			this.x *= scaleX;
			this.y *= (isNaN(scaleY) ? scaleX : scaleY);
		}
		add(point: IPoint): void {
			this.x += point.x;
			this.y += point.y;
		}
		static polar(length: number, angle: number): Vector {
			var point: IPoint = Point.getPolar(length, angle);
			return new Vector(point.x, point.y);
		}
	}	
}

作成者: 野中文雄
作成日: 2016年11月3日

HTML5テクニカルノート

TypeScript入門 11: 名前空間 ー namespace

01 namespaceで名前空間を定める

02 複数のモジュールに同じ名前空間を与える

コード001■3つのモジュールをひとつの名前空間に定める

TypeScript入門 11: 名前空間ー namespace