.jsファイルから.d.tsファイルを生成する

TypeScript 3.7では、 TypeScriptに、JSDoc構文を使ったJavaScriptから.d.tsファイルを生成するためのサポートが導入されました。

この仕組みは、プロジェクトをTypeScriptに移行することなく、TypeScriptが備わったエディタの体験を自分のものにできるということを意味します。 TypeScriptはほとんどのJSDocタグをサポートしています。リファレンスはこちら。

.d.tsファイルを出力するようにプロジェクトを設定する

プロジェクトに.d.tsファイルの作成を追加するように設定するには、最大4つのステップを実行する必要があります:

• dev dependenciesにTypeScriptを追加する
• TypeScriptを設定するためのtsconfig.jsonを追加する
• TypeScriptコンパイラを実行して、JSファイルに対応するd.tsファイルを生成する
• (任意) package.jsonを編集して型を参照できるようにする

TypeScriptを追加する

こちらは、インストールページを参照してください。

TSConfig

TSConfigはコンパイラのフラグを設定し、対象のファイルを宣言するためのjsoncファイルです。 今回のケースでは、次のようなファイルが必要になるでしょう:

json
{
  // プロジェクトに合わせて変更してください
  include: ["src/**/*"],
  compilerOptions: {
    // JSファイルは通常、ソースファイルとして無視されますが、
    // ここではJSファイルを読み込むようにTypeScriptに指示します
    allowJs: true,
    // d.tsファイルを生成します
    declaration: true,
    // コンパイラを実行すると
    // d.tsファイルのみ出力されます
    emitDeclarationOnly: true,
    // 型はこのディレクトリに出力されます
    // このオプションを削除すると
    // .jsファイルの隣に.d.tsファイルが置かれます
    outDir: "dist",
  },
}

オプションについては、tsconfigリファレンスで詳しく知ることができます。 TSConfigファイルを使用する代替手段としてCLIがあります。次は上記のTSConfigファイルの設定と同じふるまいをするCLIコマンドです。

sh
npx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types

コンパイラを実行する

実行方法についてはインストールページを参照してください。 プロジェクトの.gitignoreにファイルが指定してある場合は、これらのファイルがパッケージに含まれていることを確認しましょう。

package.jsonを編集する

TypeScriptは、.d.tsファイルを見つけるためのステップを追加し、package.jsonの中でNodeのモジュール解決を再現します。 大まかには、モジュール解決は任意のフィールドである"types"フィールドをチェックし、次に"main"フィールド、そして最後にルートのindex.d.tsを試します。

もし存在しなければ、次は”main”が使用されます

Tips

.d.tsファイルにテストを記述したいなら、tsdを試してみてください。