Skip to content

Commit 5642c89

Browse files
committed
2 parents 7b2a874 + 1843bf6 commit 5642c89

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+3257
-115
lines changed

dangerfile.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const markdownTranslate = require('@orta/markdown-translator')
2-
import {danger, message} from "danger"
2+
import {danger, markdown} from "danger"
33

44
const go = async () => {
55
const allMDFiles = [...danger.git.modified_files, ...danger.git.created_files].filter(f => f.endsWith(".md")).filter(f => f.split("/").length > 2)
6-
console.log(allMDFiles)
6+
77

88
for (const file of allMDFiles) {
99
const fileContents = await danger.github.utils.fileContents(file)
@@ -17,7 +17,12 @@ const go = async () => {
1717
region: "eastus"
1818
})
1919

20-
message(`## Translation of ${danger.github.utils.fileLinks([file])}\n\n${translation}`)
20+
markdown(`<details>
21+
<summary>Translation of ${danger.github.utils.fileLinks([file])}</summary>
22+
23+
${translation}
24+
25+
</details>`)
2126
};
2227
}
2328

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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)を試してみてください。
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: TypeScriptを活用したJSプロジェクト
3+
layout: docs
4+
permalink: /ja/docs/handbook/intro-to-js-ts.html
5+
oneline: TypeScriptを使ってJavaScriptファイルに型チェックを追加する方法
6+
translatable: true
7+
---
8+
9+
TypeScriptの型システムがコードベースを扱う際には、様々な厳密さのレベルがあります:
10+
11+
- JavaScriptのコードを使った推論のみに基づく型システム
12+
- [JSDoc](/docs/handbook/jsdoc-supported-types.html)によるJavaScriptの段階的な型付け
13+
- JavaScriptファイルにおける`// @ts-check`の使用
14+
- TypeScriptコード
15+
- [`strict`](/tsconfig#strict)を有効にしたTypeScript
16+
17+
それぞれのステップはより安全な型システムへの動きを表していますが、すべてのプロジェクトがそのレベルでの検証を必要としているわけではありません。
18+
19+
## JavaScriptと併用するTypeScript
20+
21+
こちらは、オートコンプリートやシンボルへのジャンプといった機能や、リネームなどのリファクタリングツールを提供するためにTypeScriptを使用しているエディタを使う場合です。
22+
[homepage](/)では、TypeScriptプラグインを備えているエディタをリストしています。
23+
24+
## JSDocを使ってJSで型ヒントを提供する
25+
26+
`.js`ファイルでは、多くの場合型を推測することが可能です。型が推測できない場合、JSDoc構文を使って指定することができます。
27+
28+
宣言の前でJSDocのアノテーションを使い、その宣言の型を設定します。例えば:
29+
30+
```js twoslash
31+
/** @type {number} */
32+
var x;
33+
34+
x = 0; // OK
35+
x = false; // OK?!
36+
```
37+
38+
サポートしているJSDocパターンの全リストは[JSDocがサポートする型](/docs/handbook/jsdoc-supported-types.html)にあります。
39+
40+
## `@ts-check`
41+
42+
前述のコードサンプルの最後の行はTypeScriptではエラーとなりますが、JSプロジェクトのデフォルトではエラーを発生させません。
43+
JavaScriptファイルでエラーを有効化するには、`.js`ファイルの最初の行に`// @ts-check`を追加して、TypeScriptにエラーを発生させるようにします。
44+
45+
```js twoslash
46+
// @ts-check
47+
// @errors: 2322
48+
/** @type {number} */
49+
var x;
50+
51+
x = 0; // OK
52+
x = false; // エラー
53+
```
54+
55+
エラーを追加したいJavaScriptファイルがたくさんある場合は、[`jsconfig.json`](/docs/handbook/tsconfig-json.html)を使用するように変更しましょう。
56+
ファイルに`// @ts-nocheck`コメントをつけることで、ファイルのチェックを省略することができます。
57+
58+
TypeScriptはあなたが納得できないようなエラーを発生させるかもしれませんが、その場合は前の行に`// @ts-ignore`または`// @ts-expect-error`を追加することで、特定の行のエラーを無視することができます。
59+
60+
```js twoslash
61+
// @ts-check
62+
/** @type {number} */
63+
var x;
64+
65+
x = 0; // OK
66+
// @ts-expect-error
67+
x = false; // エラー
68+
```
69+
70+
JavaScriptがTypeScriptによってどのように解釈されるかについて知りたい場合は、[TSの型がJSをチェックする方法](/docs/handbook/type-checking-javascript-files.html)を参照してください。

0 commit comments

Comments
 (0)