|
| 1 | +--- |
| 2 | +title: .jsファイルから.d.tsファイルを生成する |
| 3 | +layout: docs |
| 4 | +permalink: /ja/docs/handbook/declaration-files/dts-from-js.html |
| 5 | +oneline: "JavaScriptプロジェクトでd.tsファイルを生成する方法" |
| 6 | +translatable: true |
| 7 | +--- |
| 8 | + |
| 9 | +[TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs)では、 |
| 10 | +TypeScriptに、JSDoc構文を使ったJavaScriptから.d.tsファイルを生成するためのサポートが導入されました。 |
| 11 | + |
| 12 | +この仕組みは、プロジェクトをTypeScriptに移行することなく、TypeScriptが備わったエディタの体験を自分のものにできるということを意味します。 |
| 13 | +TypeScriptはほとんどのJSDocタグをサポートしています。リファレンスは[こちら](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc)。 |
| 14 | + |
| 15 | +## .d.tsファイルを出力するようにプロジェクトを設定する |
| 16 | + |
| 17 | +プロジェクトに.d.tsファイルの作成を追加するように設定するには、最大4つのステップを実行する必要があります: |
| 18 | + |
| 19 | +- dev dependenciesにTypeScriptを追加する |
| 20 | +- TypeScriptを設定するための`tsconfig.json`を追加する |
| 21 | +- TypeScriptコンパイラを実行して、JSファイルに対応するd.tsファイルを生成する |
| 22 | +- (任意) package.jsonを編集して型を参照できるようにする |
| 23 | + |
| 24 | +### TypeScriptを追加する |
| 25 | + |
| 26 | +こちらは、[インストールページ](/download)を参照してください。 |
| 27 | + |
| 28 | +### TSConfig |
| 29 | + |
| 30 | +TSConfigはコンパイラのフラグを設定し、対象のファイルを宣言するためのjsoncファイルです。 |
| 31 | +今回のケースでは、次のようなファイルが必要になるでしょう: |
| 32 | + |
| 33 | +```json5 |
| 34 | +{ |
| 35 | + // プロジェクトに合わせて変更してください |
| 36 | + include: ["src/**/*"], |
| 37 | + |
| 38 | + compilerOptions: { |
| 39 | + // JSファイルは通常、ソースファイルとして無視されますが、 |
| 40 | + // ここではJSファイルを読み込むようにTypeScriptに指示します |
| 41 | + allowJs: true, |
| 42 | + // d.tsファイルを生成します |
| 43 | + declaration: true, |
| 44 | + // コンパイラを実行すると |
| 45 | + // d.tsファイルのみ出力されます |
| 46 | + emitDeclarationOnly: true, |
| 47 | + // 型はこのディレクトリに出力されます |
| 48 | + // このオプションを削除すると |
| 49 | + // .jsファイルの隣に.d.tsファイルが置かれます |
| 50 | + outDir: "dist", |
| 51 | + }, |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +オプションについては、[tsconfigリファレンス](/reference)で詳しく知ることができます。 |
| 56 | +TSConfigファイルを使用する代替手段としてCLIがあります。次は上記のTSConfigファイルの設定と同じふるまいをするCLIコマンドです。 |
| 57 | + |
| 58 | +```sh |
| 59 | +npx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types |
| 60 | +``` |
| 61 | + |
| 62 | +## コンパイラを実行する |
| 63 | + |
| 64 | +実行方法については[インストールページ](/download)を参照してください。 |
| 65 | +プロジェクトの`.gitignore`にファイルが指定してある場合は、これらのファイルがパッケージに含まれていることを確認しましょう。 |
| 66 | + |
| 67 | +## package.jsonを編集する |
| 68 | + |
| 69 | +TypeScriptは、.d.tsファイルを見つけるためのステップを追加し、`package.json`の中でNodeのモジュール解決を再現します。 |
| 70 | +大まかには、モジュール解決は任意のフィールドである`"types"`フィールドをチェックし、次に`"main"`フィールド、そして最後にルートの`index.d.ts`を試します。 |
| 71 | + |
| 72 | +| Package.json | デフォルトの.d.tsの場所 | |
| 73 | +| :------------------------ | :----------------------------- | |
| 74 | +| "types"フィールドがない | "main"をチェックし、次にindex.d.ts| |
| 75 | +| "types": "main.d.ts" | main.d.ts | |
| 76 | +| "types": "./dist/main.js" | ./main/main.d.ts | |
| 77 | + |
| 78 | +もし存在しなければ、次は"main"が使用されます |
| 79 | + |
| 80 | +| Package.json | デフォルトの.d.tsの場所 | |
| 81 | +| :----------------------- | :------------------------ | |
| 82 | +| "main"フィールドがない | index.d.ts | |
| 83 | +| "main":"index.js" | index.d.ts | |
| 84 | +| "main":"./dist/index.js" | ./dist/index.d.ts | |
| 85 | + |
| 86 | +## Tips |
| 87 | + |
| 88 | +.d.tsファイルにテストを記述したいなら、[tsd](https://github.com/SamVerschueren/tsd)を試してみてください。 |
0 commit comments