HTML5テクニカルノート

TypeScript入門 10: モジュールー exportとimport

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

TypeScriptはコードをモジュールというかたちで、ファイルに分けて開発できます。その考え方とそのときに用いるexportとimportの使い方について、かいつまんでご説明します。なお、これまでは外部モジュールと呼ばれていました。対する内部モジュールが名前空間(namespace)に改められたため、単にモジュールとなりました。

01 exportとimport

ECMAScript 2015の仕様を受けて、TypeScriptはモジュールの仕組みを採り入れています。モジュールはファイルが単位となっていてそれぞれのスコープをもち、グローバルには展開されません。モジュールの中の変数や関数、インタフェースなどの宣言は、そのままであれば他から参照できないということです。モジュールの中で外から参照を許す宣言には、つぎのようにexportの指定をします。

export 宣言

つぎのコードの抜書きは、TypeScriptファイル(IPoint.ts)に定めたインタフェース(IPoint)をexport指定しています。

IPoint.ts


export interface IPoint {

}

モジュールからexportした宣言を別のモジュールで用いるには、importの定めに、つぎのとおり{}内にその宣言の識別子、fromの後にモジュールのファイルのパスを拡張子なしで与えます。

import {識別子} from ファイル名

つぎのコードの抜書きは前掲のexportしたインタフェースを実装するために、importの指定にインターフェスの識別子(IPoint)とファイル(IPoint)のパスを定めました。加えて、クラス(Point)をexportしています。

Point.ts


import {IPoint} from './IPoint';
export class Point implements IPoint {

}

さらにつぎのコードは、前掲のexportしたクラス(Vector)をimportして、サブクラス(Vector)に継承しています。

Vector.ts


import {Point} from './Point';
export class Vector extends Point {

}

以上の構成にもとづいて、「TypeScript入門 06: メソッド引数のデフォルト値と省略および定数を定める」のコード001「メソッド引数にデフォルト値と省略時の処理および定数を定める」を3つのモジュールに分けたのが、つぎのコード001です。なお、インタフェースを型づけに用いているモジュール(Vecotor)は、そのimportを加えています。

コード001■3つのモジュールのexportとimportの指定

IPoint.ts


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

Point.ts


import {IPoint} from './IPoint';
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


import {IPoint} from './IPoint';
import {Point} from './Point';
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);
	}
}

02 exportとimportのいくつかのやり方

exportやimportは、クラスやインタフェースだけでなく、変数や関数も対象にできます。つぎに抜書きしたコードではconst定数(RAD_TO_DEG)をexportしています。他のモジュールでimportするときは、その識別子を与えればよいです。


import {IPoint} from './IPoint';
export const RAD_TO_DEG: number = 180 / Math.PI;
export class Point implements IPoint {

	static get RAD_TO_DEG(): number {
		// return 180 / Math.PI;
		return RAD_TO_DEG;
	}

}

また、exportを直接宣言に加えるのでなく、つぎのコードのように別の文で行うこともできます。その場合、識別子(Point)は{}の中に与えます。そのとき、続けてつぎのようにasを添えてexportする別の識別子(VectorBase)が定められます。importするときは、その新たな識別子を用います。


import {IPoint} from './IPoint';
// export class Point implements IPoint {
class Point implements IPoint {

}
export {Point as VectorBase};

importするときにも識別子は変えられます。{}の中に与えた読み込む識別子(VectorBase)の後、つぎのようにasに続けて新たな識別子(Point)を定めればよいです。


import {VectorBase as Point} from './Point';
export class Vector extends Point {

}

作成者: 野中文雄
作成日: 2016年10月22日

HTML5テクニカルノート

TypeScript入門 10: モジュール ー exportとimport

01 exportとimport

コード001■3つのモジュールのexportとimportの指定

02 exportとimportのいくつかのやり方

TypeScript入門 10: モジュールー exportとimport