TypeScript でモジュールをインポートする

1. TypeScript プロジェクトを作成する
2. TypeScript で export キーワードを使用する
3. TypeScript で import キーワードを使用する
4. TypeScript で単一のオブジェクトをエクスポートおよびインポートする
5. TypeScript で複数のオブジェクトをエクスポートおよびインポートする
6. まとめ

TypeScript を使用してアプリケーションを開発することを学ぶとき、通常、相互に依存関係のない非常に単純なプログラムを作成します。

たとえば、メッセージをコンソールに記録するプログラムは 1 行だけで、1つのファイルに含まれています。 ただし、運用グレードのアプリケーションには複数のファイルが含まれており、これらのファイルには依存関係のあるコードが含まれています。

開発者は、これらの依存関係を実装するか、TypeScript モジュールを使用してサードパーティ ライブラリから取得できます。 TypeScript ドキュメント では、トップレベルの import または export を含む任意のファイルとしてモジュールを定義しています。

最上位の import または export を含まないファイルは、ファイルの外部からコードにアクセスできないことを意味します。 それ以外の場合、コードのスコープはグローバルです。

TypeScript プロジェクトを作成する

WebStorm IDEA を開き、File > New > Project を選択します。 開いたウィンドウで、左側にある Node.js を選択し、右側にある New Project というラベルの付いたウィンドウで、プロジェクト のプロジェクト名をuntitledからtypescript-modules に変更します。 場所セクション。

最後に、Create というラベルの付いたボタンを押して、プロジェクトを生成します。 ウィンドウが開いたら、View > Tool Windows > Terminal を選択するか、キーボード ショートカット Alt+F12 を選択して、新しい Terminal ウィンドウを開きます。

次のコマンドを使用して、アプリケーションの tsconfig.json ファイルを作成します。

~/WebstormProjects/typescript-modules$ tsc --init

ファイルが生成されたら、ファイル内の構成が次のようになっていることを確認します。 構成をコピーして tsconfig.json ファイルに貼り付けることもできます。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true

    }
}

TypeScript で export キーワードを使用する

typescript-modules フォルダーの下に EmailService.ts という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

このファイルでは、それぞれ User と EmailService という名前の 2つのクラスを作成しました。 sendEmail() メソッドは、電子メールの送信アクションをシミュレートします。

sendEmail() メソッドは User クラスを使用して、メールのメッセージを送受信するユーザーを表します。 ファイルの外部からクラスにアクセスできるようにするため、各クラスの前に export キーワードを付けました。

TypeScript で import キーワードを使用する

Main.ts という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

import {User, EmailService} from "./EmailService"

function main(){
    let thisService = new EmailService();
    console.log(thisService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

このファイルでは、main() という名前の関数を作成しました。この関数は、sendEmail() メソッドによって返された文字列をコンソールに記録します。

このメソッドは、to、from、および message の 3つのパラメーターを受け入れます。最初の 2つのパラメーターは User 型であることに注意してください。

このコードを実行するには、このチュートリアルに記載されている手順に従って新しいターミナル ウィンドウを開き、次のコマンドをコピーしてターミナルに貼り付け、Enter を押します。

~/WebstormProjects/typescript-modules$ tsc && node Main.js

このコマンドは、TypeScript ファイルを JavaScript ファイルにトランスパイルし、node ランタイム環境を使用して Main.js ファイルを実行します。 アプリケーションの出力が次のようになっていることを確認します。

message: Happy Birthday from: doe to: john

TypeScript で単一のオブジェクトをエクスポートおよびインポートする

User.ts という名前のファイルを作成し、EmailService.ts ファイル内の User クラスをユーザー ファイルにカットします。 ユーザー ファイルのコードを次のように変更します。

class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export = User

このコードでは、クラス宣言から export キーワードを削除し、クラス宣言の後に export = User ステートメントを使用して定義しています。 これは、クラスであるこのモジュールから単一のオブジェクトをエクスポートしていることを示しています。

EmailService も単一のオブジェクトをエクスポートする必要があるため、以下に示すように、クラスから export キーワードを削除し、クラス宣言の後に追加します。

import User = require("./User");

class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

export = EmailService

EmailService クラスは User オブジェクトを使用するため、require() 関数を使用してクラスにインポートする必要があります。 これが、モジュールから単一のオブジェクトをインポートする方法であることに注意してください。

もう 1つの注意点は、このインポート アプローチでは、インポートされるオブジェクトがクラスであるため、new キーワードを使用してクラスを直接呼び出すことができることです。これは関数、インターフェイスなどにも当てはまります。

行った変更が期待どおりに機能するかどうかをテストするために、以下に示すように、import ステートメントにいくつかの小さな変更を加えて Main.ts ファイルを再利用します。

import EmailService = require("./EmailService")
import User = require("./User")

function main(){
    let newService = new EmailService();
    console.log(newService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

このファイルで行った唯一の変更は、require() 関数を使用して User.ts モジュールと EmailService.ts モジュールから単一のオブジェクトをインポートすることです。

前の例で使用したのと同じコマンドを使用してアプリケーションを実行し、出力が次のようになっていることを確認します。

message: Happy Birthday from: doe to: john

TypeScript で複数のオブジェクトをエクスポートおよびインポートする

前の例を変更して、最初の例で行ったように export および import ステートメントを使用します。 EmailService.ts と User.ts を含む 3つのファイルすべてで、単一オブジェクトのエクスポートとインポートを削除します。

2つのファイルのコードが次のようになっていることを確認します。

User.ts:

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

EmailService.ts:

import {User} from "./User";

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

typescript-modules フォルダーの下に AllExports.ts という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

export * from "./EmailService"
export * from "./User"

このファイルでは、EmailService.ts ファイルと User.ts ファイルの両方でエクスポートされたすべてのメンバー クラス、インターフェイス、関数を再エクスポートしています。 モジュールにはクラス宣言のみが含まれているため、このファイルでクラスをエクスポートしていることに注意してください。

このモジュールを使用して、単一の import ステートメントを使用して Main.ts ファイルに宣言されたすべてのモジュールをインポートします。 これを実現するには、Main.ts ファイル コードが次のようになっていることを確認します。

import * as emailManager from "./AllExports"

function main(){
    let newService = new emailManager.EmailService();
    console.log(newService.sendEmail(
        new emailManager.User("john"),
        new emailManager.User("doe"),
        "Happy Birthday"));
}
main();

構文 * as を使用して AllExports.ts ファイルで定義されたすべてのモジュールをインポートする方法に注意してください。 アスタリスク * はコンパイラにファイル内のすべてのエクスポートをインポートするように指示しますが、as キーワードはインポートされたエクスポートのカスタム オブジェクト名を作成します。

前の例では、new キーワードを使用してオブジェクトを呼び出しました。 ただし、これはこの例では機能しません。

オブジェクトのメンバーの詳細にアクセスするには、オブジェクトのドット . を使用する必要があります。 この場合、EmailService および User クラスです。

emailManager オブジェクトで new キーワードを使用しようとすると、This expression is not constructable という警告が表示されます。 このコードを実行して、出力が次のようになっていることを確認します。

message: Happy Birthday from: doe to: john

まとめ

このチュートリアルでは、TypeScript でモジュールを操作する方法を説明しました。 取り上げるトピックには、export および import キーワードの使用と、単一および複数のオブジェクトのエクスポートとインポートが含まれます。