[TypeScript] 外部の ts ファイルに定義されたクラスを使用するには?

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

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

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

目次

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

外部に定義された定数や関数を使用できるようにするには、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度にコンパイルできるようにするには?

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

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

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

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

[TypeScript] 静的メンバー

ああr通常、クラスはインスタンス化して使用しますが、インスアンス化しないで使用したいようなクラスもあります。

例えば、円周率 3.14 という値や、絶対値を計算する abs メソッドや、四角形の面積を計算するメソッドなど、様々な数学用の計算式を詰め込んだクラスがあるとします。このようなクラスはインスタンス化せずに、そのまま クラス名.abs やクラス名.rectangleArea のように使用したいですよね。

このような場合は、静的メソッド や 静的プロパティを作成することでインスタンス化しなくても使用できるようになります。

今回は、静的メンバーの定義方法とその使用方法について説明します。

目次

“[TypeScript] 静的メンバー” の続きを読む