まくろぐ

TypeScriptのモジュールのインポートには import を使う

更新:
作成:

require ではなく import を使う

TypeScript で型情報付きのモジュールをインポートするときは、ECMAScript 2015 の module 構文 で定義されている import を使うようにすると、VSCode などで型情報を使った補完がうまく効くようにになります。

これを使う
// Good
import * as mod from 'mod';

下記のように、Node.js で一般的に使用されていた CommonJS 形式の require を使ってもインポートできますが、any 型の変数を定義していることになるため、型情報を用いた補完が効きません。

これは使わない
// NG
const mod = require('mod');

TypeScript でモジュールをインポートするときには、できるだけ import を使う ようにしましょう。

インポートの例(関数ベースのモジュール)

Node.js のコアモジュール(ospath など)は、もともと TypeScript 用に作成されたものではありませんが、TypeScript 用の型情報が @types/node モジュールとして提供されています。

Node.js コアモジュールの型情報をインストール
$ npm install --save-dev @types/node

これで、Node.js のコアモジュールを下記のように型情報付きでインポートできるようになります。 これは、複数の関数を export する TypeScript モジュールをインポートする方法のよい例です。

よい例: 型として認識される
import * as path from 'path';  // 全ての関数をインポート
import { join } from 'path';   // 個別の関数をインポート

これで、VSCode などの IDE で次のように補完が聞くようになります。

/p/emdtiio/img-001.png

逆に、次のようにインポートしてしまうと、any 型の path 変数が定義されているものとみなされ、補完機能がうまく働きません。

悪い例: 型として認識されない
const path = require('path');

インポートの例(クラスのインポート)

モジュールが export しているクラスを個々にインポートする場合も同様に import を使用します。

よい例: 型として認識される
import { QnAMaker } from 'botbuilder-ai';
悪い例: 型として認識されない
const { QnAMaker } = require('botbuilder-ai');

前者のように、import キーワードを使ってインポートすれば、QnAMaker は型情報だとみなされるため、TypeScript の型安全性をいかしたコーディングを行うことができます。

class Faq {
    qnaMaker: QnAMaker;  // QnAMaker 型のプロパティを定義
    // ...
}

関連記事

まくろぐ
サイトマップまくへのメッセージ