HIRO's.NET Blog

TypeScript の開発において、常に1つの ts ファイルを使用するとは限りません。

場合によっては、クラスごとにファイルを作成する場合もあるでしょう。

今回は、複数の ts ファイルを連携して使用する方法について説明します。

目次

• 外部に定義された定数や関数を使用できるようにするには？
• 外部に定義されたクラスを使用できるようにするには？
• 複数のファイルを1度にコンパイルできるようにするには？

外部に定義された定数や関数を使用できるようにするには？

外部に定義された定数や関数を使用できるようにするには、export キーワードと import キーワードを使用します。

export キーワードは、「外部のファイルでも使用してもいいよ」ということを意味します。

例えば、定数 PI と GRAVITY、関数 add を外部ファイルでも使用可能にするには、以下のように export キーワードを付けて定義します。

// ファイル名:constant.ts

// 定数のエクスポート
export const PI = 3.14;
export const GRAVITY = 9.8; 

// 関数のエクスポート
export function add(x : number, y : number) : number {
    return x + y;
} 

一方、外部のファイルに定義された定数や関数を使用したい場合は、以下のように import キーワードの後ろの {} に使用したいものをカンマで区切って記述します。また from キーワードの後ろには、 export 対象が書かれているファイル名（拡張子は不要）を書きます。

あとは、あたかも自分自身のファイルに書かれているかのように使用することができます。

import {PI,GRAVITY,add} from "./constant";

console.log(PI);
console.log(GRAVITY);
console.log(add(3,2))

外部に定義されたクラスを使用するには？

外部に定義されたクラスも、定数や関数と同様に export キーワード と import キーワードを使用します。

以下は足し算をする add というメソッドが定義された Calculator クラスの export 定義をする例です。

export class Calculator {
    add(x: number, y: number): number {
        return x + y;
    }
};

使用方法も、定数や関数と同じで import キーワードを使用します。

import {Calculator} from "./calculator";

console.log(calc.add(1,2));

複数のファイルを1度にコンパイルできるようにするには？

本連載の１回目の記事「TypeScript 入門」の「tsconfig.jsonの作成」で tsconfig.json ファイルの作成方法を説明しました。

このファイルに files を追加することで任意の複数のファイルを1度にコンパイルできるようになります。

例えば、calculator.ts と test.ts のみをコンパイルできるようにするには 以下のように書きます。

{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"sourceMap": false
	},
	"files": [
		"calculator.ts",
		"test.ts"
	]
}