|
1 | 1 | ---
|
2 |
| -title: Creating .d.ts Files from .js files |
| 2 | +title: .jsファイルから.d.tsファイルを生成する |
3 | 3 | layout: docs
|
4 |
| -permalink: /docs/handbook/declaration-files/dts-from-js.html |
5 |
| -oneline: "How to add d.ts generation to JavaScript projects" |
| 4 | +permalink: /ja/docs/handbook/declaration-files/dts-from-js.html |
| 5 | +oneline: "JavaScriptプロジェクトでd.tsファイルを生成する方法" |
6 | 6 | translatable: true
|
7 | 7 | ---
|
8 | 8 |
|
9 |
| -[With TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs), |
10 |
| -TypeScript added support for generating .d.ts files from JavaScript using JSDoc syntax. |
| 9 | +[TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs)では、 |
| 10 | +TypeScriptに、JSDoc構文を使ったJavaScriptから.d.tsファイルを生成するためのサポートが導入されました。 |
11 | 11 |
|
12 |
| -This set up means you can own the editor experience of TypeScript-powered editors without porting your project to TypeScript, or having to maintain .d.ts files in your codebase. |
13 |
| -TypeScript supports most JSDoc tags, you can find [the reference here](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc). |
| 12 | +この仕組みは、プロジェクトをTypeScriptに移行することなく、TypeScriptが備わったエディタの経験を自分のものにできるということを意味します。 |
| 13 | +TypeScriptはほとんどのJSDocタグをサポートしています。リファレンスは[こちら](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc)。 |
14 | 14 |
|
15 |
| -## Setting up your Project to emit .d.ts files |
| 15 | +## .d.tsファイルを出力するようにプロジェクトを設定する |
16 | 16 |
|
17 |
| -To add creation of .d.ts files in your project, you will need to do up-to four steps: |
| 17 | +プロジェクトに.d.tsファイルの作成を追加するように設定するには、最大4つのステップを実行する必要があります: |
18 | 18 |
|
19 |
| -- Add TypeScript to your dev dependencies |
20 |
| -- Add a `tsconfig.json` to configure TypeScript |
21 |
| -- Run the TypeScript compiler to generate the corresponding d.ts files for JS files |
22 |
| -- (optional) Edit your package.json to reference the types |
| 19 | +- dev dependenciesにTypeScriptを追加する |
| 20 | +- TypeScriptを設定するための`tsconfig.json`を追加する |
| 21 | +- TypeScriptコンパイラを実行して、JSファイルに対応するd.tsファイルを生成する |
| 22 | +- (オプション) package.jsonを編集して型を参照できるようにする |
23 | 23 |
|
24 |
| -### Adding TypeScript |
| 24 | +### TypeScriptを追加する |
25 | 25 |
|
26 |
| -You can learn how to do this in our [installation page](/download). |
| 26 | +こちらは、[インストールページ](/download)を参照してください。 |
27 | 27 |
|
28 | 28 | ### TSConfig
|
29 | 29 |
|
30 |
| -The TSConfig is a jsonc file which configures both your compiler flags, and declare where to find files. |
31 |
| -In this case, you will want a file like the following: |
| 30 | +TSConfigはコンパイラのフラグを設定し、対象のファイルを宣言するためのjsoncファイルです。 |
| 31 | +今回のケースでは、次のようなファイルが必要になるでしょう: |
32 | 32 |
|
33 | 33 | ```json5
|
34 | 34 | {
|
35 |
| - // Change this to match your project |
| 35 | + // プロジェクトに合わせて変更してください |
36 | 36 | include: ["src/**/*"],
|
37 | 37 |
|
38 | 38 | compilerOptions: {
|
39 |
| - // Tells TypeScript to read JS files, as |
40 |
| - // normally they are ignored as source files |
| 39 | + // JSファイルは通常はソースファイルとしては無視されますが、 |
| 40 | + // ここではJSファイルを読み込むようにTypeScriptに指示します |
41 | 41 | allowJs: true,
|
42 |
| - // Generate d.ts files |
| 42 | + // d.tsファイルを生成します |
43 | 43 | declaration: true,
|
44 |
| - // This compiler run should |
45 |
| - // only output d.ts files |
| 44 | + // コンパイラを実行すると |
| 45 | + // d.tsファイルのみ出力されます |
46 | 46 | emitDeclarationOnly: true,
|
47 |
| - // Types should go into this directory. |
48 |
| - // Removing this would place the .d.ts files |
49 |
| - // next to the .js files |
| 47 | + // 型はこのディレクトリに出力されます |
| 48 | + // このオプションを削除すると |
| 49 | + // .jsファイルの隣に.d.tsファイルが置かれます |
50 | 50 | outDir: "dist",
|
51 | 51 | },
|
52 | 52 | }
|
53 | 53 | ```
|
54 | 54 |
|
55 |
| -You can learn more about the options in the [tsconfig reference](/reference). |
56 |
| -An alternative to using a TSConfig file is the CLI, this is the same behavior as a CLI command. |
| 55 | +オプションについては、[tsconfigリファレンス](/reference)で詳しく知ることができます。 |
| 56 | +TSConfigファイルを使用する代替手段としてCLIがあります。次は上記のTSConfigファイルと同じふるまいをするCLIコマンドです。 |
57 | 57 |
|
58 | 58 | ```sh
|
59 | 59 | npx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types
|
60 | 60 | ```
|
61 | 61 |
|
62 |
| -## Run the compiler |
| 62 | +## コンパイラを実行する |
63 | 63 |
|
64 |
| -You can learn how to do this in our [installation page](/download). |
65 |
| -You want to make sure these files are included in your package if you have the files in your project's `.gitignore`. |
| 64 | +実行方法については[インストールページ](/download)を参照してください。 |
| 65 | +プロジェクトの`.gitignore`に生成されたファイルがある場合は、確実にパッケージにそれらのファイルが含まれるようにしてください。 |
66 | 66 |
|
67 |
| -## Editing the package.json |
| 67 | +## package.jsonを編集する |
68 | 68 |
|
69 |
| -TypeScript replicates the node resolution for modules in a `package.json`, with an additional step for finding .d.ts files. |
70 |
| -Roughly, the resolution will first check the optional `"types"` field, then the `"main"` field, and finally will try `index.d.ts` in the root. |
| 69 | +TypeScriptは、`package.json`の中でNodeのモジュール解決を再現し、.d.tsファイルを見つけるためのステップを追加します。 |
| 70 | +大まかには、ノード解決はオプションである`"types"`フィールドをチェックし、次に`"main"`フィールド、そして最後にルートの`index.d.ts`を試します。 |
71 | 71 |
|
72 |
| -| Package.json | Location of default .d.ts | |
| 72 | +| Package.json | デフォルトの.d.tsの場所 | |
73 | 73 | | :------------------------ | :----------------------------- |
|
74 |
| -| No "types" field | checks "main", then index.d.ts | |
| 74 | +| "types"フィールドがない | "main"をチェックし、次にindex.d.ts| |
75 | 75 | | "types": "main.d.ts" | main.d.ts |
|
76 | 76 | | "types": "./dist/main.js" | ./main/main.d.ts |
|
77 | 77 |
|
78 |
| -If absent, then "main" is used |
| 78 | +もし存在しなければ、次は"main"が使用されます |
79 | 79 |
|
80 |
| -| Package.json | Location of default .d.ts | |
| 80 | +| Package.json | デフォルトの.d.tsの場所 | |
81 | 81 | | :----------------------- | :------------------------ |
|
82 |
| -| No "main" field | index.d.ts | |
| 82 | +| "main"フィールドがない | index.d.ts | |
83 | 83 | | "main":"index.js" | index.d.ts |
|
84 | 84 | | "main":"./dist/index.js" | ./dist/index.d.ts |
|
85 | 85 |
|
86 | 86 | ## Tips
|
87 | 87 |
|
88 |
| -If you'd like to write tests for your .d.ts files, try [tsd](https://github.com/SamVerschueren/tsd). |
| 88 | +.d.tsファイルにテストを記述したいなら、[tsd](https://github.com/SamVerschueren/tsd)を試してみてください。 |
0 commit comments