Skip to content

Commit

Permalink
translate files into ja
Browse files Browse the repository at this point in the history
  • Loading branch information
uraway committed Jan 8, 2021
1 parent d7a1366 commit f57223d
Show file tree
Hide file tree
Showing 4 changed files with 280 additions and 280 deletions.
Original file line number Diff line number Diff line change
@@ -1,88 +1,88 @@
---
title: Creating .d.ts Files from .js files
title: .jsファイルから.d.tsファイルを生成する
layout: docs
permalink: /docs/handbook/declaration-files/dts-from-js.html
oneline: "How to add d.ts generation to JavaScript projects"
permalink: /ja/docs/handbook/declaration-files/dts-from-js.html
oneline: "JavaScriptプロジェクトでd.tsファイルを生成する方法"
translatable: true
---

[With TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs),
TypeScript added support for generating .d.ts files from JavaScript using JSDoc syntax.
[TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs)では、
TypeScriptに、JSDoc構文を使ったJavaScriptから.d.tsファイルを生成するためのサポートが導入されました。

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.
TypeScript supports most JSDoc tags, you can find [the reference here](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc).
この仕組みは、プロジェクトをTypeScriptに移行することなく、TypeScriptが備わったエディタの経験を自分のものにできるということを意味します。
TypeScriptはほとんどのJSDocタグをサポートしています。リファレンスは[こちら](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc)

## Setting up your Project to emit .d.ts files
## .d.tsファイルを出力するようにプロジェクトを設定する

To add creation of .d.ts files in your project, you will need to do up-to four steps:
プロジェクトに.d.tsファイルの作成を追加するように設定するには、最大4つのステップを実行する必要があります:

- Add TypeScript to your dev dependencies
- Add a `tsconfig.json` to configure TypeScript
- Run the TypeScript compiler to generate the corresponding d.ts files for JS files
- (optional) Edit your package.json to reference the types
- dev dependenciesにTypeScriptを追加する
- TypeScriptを設定するための`tsconfig.json`を追加する
- TypeScriptコンパイラを実行して、JSファイルに対応するd.tsファイルを生成する
- (オプション) package.jsonを編集して型を参照できるようにする

### Adding TypeScript
### TypeScriptを追加する

You can learn how to do this in our [installation page](/download).
こちらは、[インストールページ](/download)を参照してください。

### TSConfig

The TSConfig is a jsonc file which configures both your compiler flags, and declare where to find files.
In this case, you will want a file like the following:
TSConfigはコンパイラのフラグを設定し、対象のファイルを宣言するためのjsoncファイルです。
今回のケースでは、次のようなファイルが必要になるでしょう:

```json5
{
// Change this to match your project
// プロジェクトに合わせて変更してください
include: ["src/**/*"],

compilerOptions: {
// Tells TypeScript to read JS files, as
// normally they are ignored as source files
// JSファイルは通常はソースファイルとしては無視されますが、
// ここではJSファイルを読み込むようにTypeScriptに指示します
allowJs: true,
// Generate d.ts files
// d.tsファイルを生成します
declaration: true,
// This compiler run should
// only output d.ts files
// コンパイラを実行すると
// d.tsファイルのみ出力されます
emitDeclarationOnly: true,
// Types should go into this directory.
// Removing this would place the .d.ts files
// next to the .js files
// 型はこのディレクトリに出力されます
// このオプションを削除すると
// .jsファイルの隣に.d.tsファイルが置かれます
outDir: "dist",
},
}
```

You can learn more about the options in the [tsconfig reference](/reference).
An alternative to using a TSConfig file is the CLI, this is the same behavior as a CLI command.
オプションについては、[tsconfigリファレンス](/reference)で詳しく知ることができます。
TSConfigファイルを使用する代替手段としてCLIがあります。次は上記のTSConfigファイルと同じふるまいをするCLIコマンドです。

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

## Run the compiler
## コンパイラを実行する

You can learn how to do this in our [installation page](/download).
You want to make sure these files are included in your package if you have the files in your project's `.gitignore`.
実行方法については[インストールページ](/download)を参照してください。
プロジェクトの`.gitignore`に生成されたファイルがある場合は、確実にパッケージにそれらのファイルが含まれるようにしてください。

## Editing the package.json
## package.jsonを編集する

TypeScript replicates the node resolution for modules in a `package.json`, with an additional step for finding .d.ts files.
Roughly, the resolution will first check the optional `"types"` field, then the `"main"` field, and finally will try `index.d.ts` in the root.
TypeScriptは、`package.json`の中でNodeのモジュール解決を再現し、.d.tsファイルを見つけるためのステップを追加します。
大まかには、ノード解決はオプションである`"types"`フィールドをチェックし、次に`"main"`フィールド、そして最後にルートの`index.d.ts`を試します。

| Package.json | Location of default .d.ts |
| Package.json | デフォルトの.d.tsの場所 |
| :------------------------ | :----------------------------- |
| No "types" field | checks "main", then index.d.ts |
| "types"フィールドがない | "main"をチェックし、次にindex.d.ts|
| "types": "main.d.ts" | main.d.ts |
| "types": "./dist/main.js" | ./main/main.d.ts |

If absent, then "main" is used
もし存在しなければ、次は"main"が使用されます

| Package.json | Location of default .d.ts |
| Package.json | デフォルトの.d.tsの場所 |
| :----------------------- | :------------------------ |
| No "main" field | index.d.ts |
| "main"フィールドがない | index.d.ts |
| "main":"index.js" | index.d.ts |
| "main":"./dist/index.js" | ./dist/index.d.ts |

## Tips

If you'd like to write tests for your .d.ts files, try [tsd](https://github.com/SamVerschueren/tsd).
.d.tsファイルにテストを記述したいなら、[tsd](https://github.com/SamVerschueren/tsd)を試してみてください。
50 changes: 25 additions & 25 deletions packages/documentation/copy/ja/javascript/Intro to JS with TS.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
---
title: JS Projects Utilizing TypeScript
title: TypeScriptを活用したJSプロジェクト
layout: docs
permalink: /docs/handbook/intro-to-js-ts.html
oneline: How to add type checking to JavaScript files using TypeScript
permalink: /ja/docs/handbook/intro-to-js-ts.html
oneline: TypeScriptを使ってJavaScriptファイルに型チェックを追加する方法
translatable: true
---

The type system in TypeScript has different levels of strictness when working with a codebase:
TypeScriptの型システムがコードベースを扱う際には、様々な厳密さのレベルがあります:

- A type-system based only on inference with JavaScript code
- Incremental typing in JavaScript [via JSDoc](/docs/handbook/jsdoc-supported-types.html)
- Using `// @ts-check` in a JavaScript file
- TypeScript code
- TypeScript with [`strict`](/tsconfig#strict) enabled
- JavaScriptのコードを使った推論のみに基づく型システム
- [JSDoc](/docs/handbook/jsdoc-supported-types.html)によるJavaScriptの段階的な型付け
- JavaScriptファイルにおける`// @ts-check`の使用
- TypeScriptコード
- [`strict`](/tsconfig#strict)を有効にしたTypeScript

Each step represents a move towards a safer type-system, but not every project needs that level of verification.
それぞれのステップはより安全な型システムへの動きを表していますが、すべてのプロジェクトがそのレベルでの検証を必要としているわけではありません。

## TypeScript with JavaScript
## JavaScriptと併用するTypeScript

This is when you use an editor which uses TypeScript to provide tooling like auto-complete, jump to symbol and refactoring tools like rename.
The [homepage](/) has a list of editors which have TypeScript plugins.
こちらは、オートコンプリートやシンボルへのジャンプといった機能や、リネームなどのリファクタリングツールを提供するためにTypeScriptを使用しているエディタを使う場合です。
[homepage](/)では、TypeScriptプラグインを備えているエディタをリストしています。

## Providing Type Hints in JS via JSDoc
## JSDocを使ってJSで型ヒントを提供する

In a `.js` file, types can often be inferred. When types can't be inferred, they can be specified using JSDoc syntax.
`.js`ファイルでは、多くの場合型を推測することが可能です。型が推測できない場合、JSDoc構文を使って指定することができます。

JSDoc annotations come before a declaration will be used to set the type of that declaration. For example:
宣言の前でJSDocのアノテーションを使い、その宣言の型を設定します。例えば:

```js twoslash
/** @type {number} */
Expand All @@ -35,12 +35,12 @@ x = 0; // OK
x = false; // OK?!
```

You can find the full list of supported JSDoc patterns [in JSDoc Supported Types](/docs/handbook/jsdoc-supported-types.html).
サポートしているJSDocパターンの全リストは[JSDocがサポートする型](/docs/handbook/jsdoc-supported-types.html)にあります。

## `@ts-check`

The last line of the previous code sample would raise an error in TypeScript, but it doesn't by default in a JS project.
To enable errors in your JavaScript files add: `// @ts-check` to the first line in your `.js` files to have TypeScript raise it as an error.
前述のコードサンプルの最後の行はTypeScriptではエラーとなりますが、JSプロジェクトではデフォルトではエラーを発生させません。
JavaScriptファイルでエラーを有効化するには、`.js`ファイルの最初の行に`// @ts-check`を追加して、TypeScriptのエラーを発生させるようにします。

```js twoslash
// @ts-check
Expand All @@ -49,13 +49,13 @@ To enable errors in your JavaScript files add: `// @ts-check` to the first line
var x;

x = 0; // OK
x = false; // Not OK
x = false; // エラー
```

If you have a lot of JavaScript files you want to add errors to then you can switch to using a [`jsconfig.json`](/docs/handbook/tsconfig-json.html).
You can skip checking some files by adding a `// @ts-nocheck` comment to files.
エラーを追加したいJavaScriptファイルがたくさんある場合は、[`jsconfig.json`](/docs/handbook/tsconfig-json.html)を使用するように変更しましょう。
ファイルに`// @ts-nocheck`コメントをつけることで、ファイルのチェックを省略することができます。

TypeScript may offer you errors which you disagree with, in those cases you can ignore errors on specific lines by adding `// @ts-ignore` or `// @ts-expect-error` on the preceding line.
TypeScriptはあなたが納得できないようなエラーを発生させるかもしれませんが、その場合は前の行に`// @ts-ignore`または`// @ts-expect-error`を追加することで、特定の行のエラーを無視することができます。

```js twoslash
// @ts-check
Expand All @@ -64,7 +64,7 @@ var x;

x = 0; // OK
// @ts-expect-error
x = false; // Not OK
x = false; // エラー
```

To learn more about how JavaScript is interpreted by TypeScript read [How TS Type Checks JS](/docs/handbook/type-checking-javascript-files.html)
JavaScriptがTypeScriptによってどのように解釈されるかについて知りたい場合は、[TSの型がJSをチェックする方法](/docs/handbook/type-checking-javascript-files.html)を参照してください。
Loading

0 comments on commit f57223d

Please sign in to comment.