TypeScript モジュール

概要: このチュートリアルでは、TypeScript モジュールとそのコード構造化への使用方法について学習します。

TypeScript モジュールの紹介

ES6 以降、JavaScript はモジュールを言語のネイティブな一部としてサポートするようになりました。TypeScript は JavaScript と同じモジュール概念を共有しています。

TypeScript モジュールには、宣言とコードの両方を記述できます。モジュールはグローバルスコープではなく、独自のスコープ内で実行されます。つまり、モジュール内で変数、関数、クラス、インターフェースなどを宣言した場合、`export` ステートメントを使用して明示的にエクスポートしない限り、モジュールの外部からはアクセスできません。

一方、モジュールから変数、関数、クラスなどにアクセスするには、`import` ステートメントを使用してインポートする必要があります。

ES6 と同様に、トップレベルの import または export を含む TypeScript ファイルはモジュールとして扱われます。

新しいモジュールの作成

`Validator.ts` という新しいモジュールを作成し、`Validator` という名前のインターフェースを宣言します。

export interface Validator {
    isValid(s: string): boolean
}Code language: TypeScript (typescript)

このモジュールでは、`interface` キーワードの前に `export` キーワードを付けて、他のモジュールからアクセスできるようにします。

言い換えると、`export` キーワードを使用しない場合、`Validator` インターフェースは `Validator.ts` モジュール内でプライベートになります。そのため、他のモジュールからは使用できません。

エクスポートステートメント

モジュールから宣言をエクスポートするもう1つの方法は、`export` ステートメントを使用することです。例えば

interface Validator {
    isValid(s: string): boolean
}

export { Validator };Code language: TypeScript (typescript)

TypeScript では、モジュールの利用者向けに宣言の名前を変更することもできます。

interface Validator {
    isValid(s: string): boolean
}

export { Validator as StringValidator };Code language: TypeScript (typescript)

この例では、他のモジュールは `Validator` インターフェースを `StringValidator` インターフェースとして使用します。

新しいモジュールのインポート

モジュールを使用するには、`import` ステートメントを使用します。以下は、`Validator.ts` モジュールを使用する新しいモジュール `EmailValidator.ts` を作成します。

import { Validator } from './Validator';

class EmailValidator implements Validator {
    isValid(s: string): boolean {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(s);
    }
}

export { EmailValidator };Code language: TypeScript (typescript)

モジュールをインポートするときは、次のように名前を変更できます。

import { Validator as StringValidator } from './Validator';Code language: TypeScript (typescript)

`EmailValidator` モジュール内では、代わりに `Validator` インターフェースを `StringValidator` インターフェースとして使用します。

import { Validator as StringValidator } from './Validator';

class EmailValidator implements StringValidator {
    isValid(s: string): boolean {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(s);
    }
}

export { EmailValidator };Code language: TypeScript (typescript)

以下は、`App.ts` ファイルで `EmailValidator` モジュールを使用する方法を示しています。

import { EmailValidator } from './EmailValidator';

let email = '[email protected]';
let validator = new EmailValidator();
let result = validator.isValid(email);

console.log(result);Code language: TypeScript (typescript)

出力

trueCode language: TypeScript (typescript)

型のインポート

`Types.ts` モジュールで `alphanumeric` という型を宣言します。

export type alphanumeric = string | number;Code language: TypeScript (typescript)

`Types.ts` モジュールから `alphanumeric` 型をインポートするには、`import type` ステートメントを使用できます。

import type {alphanumeric} from './Types';Code language: TypeScript (typescript)

TypeScript はバージョン 3.8 以降から `import type` ステートメントをサポートしています。TypeScript 3.8 より前のバージョンでは、代わりに `import` ステートメントを使用する必要があります。

import {alphanumeric} from './Types';Code language: TypeScript (typescript)

モジュールからのすべてのインポート

モジュールからすべてをインポートするには、次の構文を使用します。

import * from 'module_name';Code language: TypeScript (typescript)

再エクスポート

`Validator.ts` モジュールを使用する `ZipCodeValidator.ts` という新しいモジュールを作成します。

import { Validator } from './Validator';

class ZipCodeValidator implements Validator {
    isValid(s: string): boolean {
        const numberRegexp = /^[0-9]+$/;
        return s.length === 5 && numberRegexp.test(s);
    }
}

export { ZipCodeValidator };Code language: TypeScript (typescript)

次の構文を使用してすべてのエクスポートを組み合わせることで、`EmailValidator` と `ZipCodeValidator` モジュールを新しいモジュールにラップできます。

export * from 'module_name';Code language: TypeScript (typescript)

次の例は、`EmailValidator.ts` と `ZipCodeValidator.ts` モジュールを `FormValidator.ts` モジュールにラップする方法を示しています。

export * from "./EmailValidator";
export * from "./ZipCodeValidator";Code language: TypeScript (typescript)

デフォルトエクスポート

TypeScript では、各モジュールにデフォルトエクスポートを1つ持つことができます。エクスポートをデフォルトエクスポートとしてマークするには、`default` キーワードを使用します。

以下は、`ZipCodeValidator` をデフォルトエクスポートとしてエクスポートする方法を示しています。

import { Validator } from './Validator';

export default class ZipCodeValidator implements Validator {
    isValid(s: string): boolean {
        const numberRegexp = /^[0-9]+$/;
        return s.length === 5 && numberRegexp.test(s);
    }
}Code language: TypeScript (typescript)

デフォルトエクスポートをインポートするには、次のような異なる `import` 構文を使用します。

import default_export from 'module_name';Code language: TypeScript (typescript)

以下は、`App.ts` ファイルで `ZipCodeValidator` からデフォルトエクスポートを使用する方法を示しています。

import ZipCodeValidator from './ZipCodeValidator';

let validator = new ZipCodeValidator();
let result = validator.isValid('95134');

console.log(result);Code language: TypeScript (typescript)

出力

trueCode language: TypeScript (typescript)

まとめ

• TypeScript は ES6 モジュールと同じモジュール概念を共有しています。モジュールには、宣言とコードの両方を記述できます。
• モジュールでは、変数、関数、クラス、インターフェースなどは、グローバルスコープではなく、独自のスコープ内で実行されます。
• `export` ステートメントを使用して、モジュールから変数、関数、クラス、インターフェース、型などをエクスポートします。
• `import` ステートメントを使用して、他のモジュールからエクスポートにアクセスします。