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

TypeScript 3.7 では、JSDoc 構文を使用して JavaScript から .d.ts ファイルを生成する機能が追加されました。

この設定により、プロジェクトを TypeScript に移植したり、コードベースで .d.ts ファイルを保守したりすることなく、TypeScript 対応エディターのエディターエクスペリエンスを享受できます。TypeScript はほとんどの JSDoc タグをサポートしています。リファレンスはこちら。

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

プロジェクトで .d.ts ファイルの作成を追加するには、最大 4 つの手順を実行する必要があります。

• 開発依存関係に TypeScript を追加する
• TypeScript を設定するために tsconfig.json を追加する
• TypeScript コンパイラを実行して、JS ファイルに対応する .d.ts ファイルを生成する
• （オプション）package.json を編集して型を参照する

TypeScript の追加

これを行う方法については、インストールページをご覧ください。

TSConfig

TSConfig は、コンパイラフラグとファイルの場所を宣言する jsonc ファイルです。この場合、次のようなファイルが必要になります。

{
  // Change this to match your project
  "include": ["src/**/*"],
  "compilerOptions": {
    // Tells TypeScript to read JS files, as
    // normally they are ignored as source files
    "allowJs": true,
    // Generate d.ts files
    "declaration": true,
    // This compiler run should
    // only output d.ts files
    "emitDeclarationOnly": true,
    // Types should go into this directory.
    // Removing this would place the .d.ts files
    // next to the .js files
    "outDir": "dist",
    // go to js file when using IDE functions like
    // "Go to Definition" in VSCode
    "declarationMap": true
  }
}

オプションの詳細については、tsconfig リファレンスをご覧ください。TSConfig ファイルの代わりに CLI を使用することもできます。これは CLI コマンドと同じ動作です。

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

コンパイラの実行

この方法は、インストールページで学ぶことができます。 プロジェクトの.gitignoreにファイルがある場合、これらのファイルがパッケージに含まれていることを確認してください。

package.jsonの編集

TypeScriptは、package.jsonのモジュールのノード解決を再現し、.d.tsファイルを見つけるための追加手順を実行します。 大まかに言うと、解決は最初にオプションのtypesフィールドをチェックし、次に"main"フィールドをチェックし、最後にルートにあるindex.d.tsを試します。

Package.json	デフォルトの.d.tsの場所
「types」フィールドなし	「main」、次にindex.d.tsをチェックします
「types」：「main.d.ts」	main.d.ts
「types」：「./dist/main.js」	./dist/main.d.ts

存在しない場合は、「main」が使用されます

Package.json	デフォルトの.d.tsの場所
「main」フィールドなし	index.d.ts
「main」：「index.js」	index.d.ts
「main」：「./dist/index.js」	./dist/index.d.ts

ヒント

.d.tsファイルのテストを作成する場合は、tsdを試してください。