TypeScript: `esModuleInterop` オプションを使ったクラスのインポート

TypeScriptで定義ファイル(*.d.ts)におけるクラスのインポート

import キーワード

JavaScriptと同様に、import キーワードを使ってクラスをインポートできます。

// 外部ライブラリの型定義ファイル
export class MyClass {
  // ...
}

// 自身のコード
import { MyClass } from "./path/to/library.d.ts";

const myClass = new MyClass();

この方法を使うには、export キーワードでクラスが公開されている必要があります。

declare キーワード

declare キーワードを使って、すでにグローバルスコープに存在するクラスをインポートできます。

// 外部ライブラリの型定義ファイル (exportなし)
class MyClass {
  // ...
}

// 自身のコード
declare var MyClass: new () => MyClass;

const myClass = new MyClass();

この方法を使う場合、クラスがグローバルスコープに存在する必要があります。

/// <reference> ディレクティブ

/// <reference> ディレクティブを使って、別の型定義ファイルをインポートできます。

// 外部ライブラリの型定義ファイル
export class MyClass {
  // ...
}

// 自身のコード
/// <reference path="./path/to/library.d.ts" />

const myClass = new MyClass();

この方法を使う場合、インポートするファイルは同じディレクトリまたは相対パスにある必要があります。

// 外部ライブラリの型定義ファイル (library.d.ts)
export class MyClass {
  constructor(public name: string) {}

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 自身のコード (index.ts)
import { MyClass } from "./library.d.ts";

const myClass = new MyClass("John Doe");
myClass.sayHello();

Hello, my name is John Doe

// 外部ライブラリの型定義ファイル (library.d.ts)
class MyClass {
  constructor(public name: string) {}

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 自身のコード (index.ts)
declare var MyClass: new (name: string) => MyClass;

const myClass = new MyClass("Jane Doe");
myClass.sayHello();

このコードも同様に、以下の出力がコンソールに出力されます。

Hello, my name is Jane Doe

// 外部ライブラリの型定義ファイル (library.d.ts)
export class MyClass {
  constructor(public name: string) {}

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 自身のコード (index.ts)
/// <reference path="./library.d.ts" />

const myClass = new MyClass("John Smith");
myClass.sayHello();

Hello, my name is John Smith

amd モジュール

amd モジュールローダーを使用している場合は、define 関数を使ってクラスをインポートできます。

// 外部ライブラリの型定義ファイル (library.d.ts)
define(["require", "exports"], function(require, exports) {
  "use strict";

  exports.MyClass = MyClass;

  class MyClass {
    constructor(public name: string) {}

    sayHello(): void {
      console.log(`Hello, my name is ${this.name}`);
    }
  }
});

// 自身のコード (index.ts)
require(["path/to/library"], function(MyClass) {
  const myClass = new MyClass("John Doe");
  myClass.sayHello();
});

Hello, my name is John Doe

cjs モジュール

cjs モジュールローダーを使用している場合は、module.exports オブジェクトを使ってクラスをインポートできます。

// 外部ライブラリの型定義ファイル (library.d.ts)
module.exports = {
  MyClass: MyClass
};

class MyClass {
  constructor(public name: string) {}

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 自身のコード (index.ts)
const { MyClass } = require("./library.d.ts");

const myClass = new MyClass("Jane Doe");
myClass.sayHello();

Hello, my name is Jane Doe

esModuleInterop オプション

esModuleInterop オプションを有効にすると、import キーワードを使って cjs モジュールのクラスをインポートできます。

// 外部ライブラリの型定義ファイル (library.d.ts)
// ...

// 自身のコード (index.ts)
"use strict";

import { MyClass } from "./library.d.ts";

const myClass = new MyClass("John Smith");
myClass.sayHello();

Hello, my name is John Smith