-
Notifications
You must be signed in to change notification settings - Fork 1.4k
[ja translation] tsconfig-reference 9 files #1432
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 3 commits
15af1d8
d969a42
3858c7b
f9a8b10
99a4a3c
39ec48a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
--- | ||
display: "disableReferencedProjectLoad" | ||
oneline: "Reduces the number of projects loaded automatically by TypeScript" | ||
--- | ||
|
||
複数プロジェクトのTypeScriptプログラムでは、TypeScriptは利用可能なすべてのプロジェクトをメモリに読み込みます。これにより、「すべての参照元を検索」のような完全なナレッジグラフを必要とするエディタのレスポンスに対して正確な結果を提供することができます。 | ||
|
||
プロジェクトが大規模な場合は、`disableReferencedProjectLoad`フラグを使用してすべてのプロジェクトの自動読み込みを無効にすることができます。代わりに、エディタでファイルを開いたときに動的にプロジェクトが読み込まれます。 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
--- | ||
display: "jsxFragmentFactory" | ||
oneline: "Specify the JSX Fragment reference to use for fragements when targeting React JSX emit, e.g. 'React.Fragment' or 'Fragment'." | ||
--- | ||
|
||
コンパイラオプションに`jsxFactory`が指定されており、React JSXのコンパイルを目的とする場合に使用されるJSXフラグメントファクトリ関数(例: `Fragment`)を指定します。 | ||
|
||
例えば、次のTSConfigでは: | ||
|
||
```json tsconfig | ||
{ | ||
"compilerOptions": { | ||
"target": "esnext", | ||
"module": "commonjs", | ||
"jsx": "react", | ||
"jsxFactory": "h", | ||
"jsxFragmentFactory": "Fragment" | ||
} | ||
} | ||
``` | ||
|
||
このTSXファイルは: | ||
|
||
```tsx | ||
import { h, Fragment } from "preact"; | ||
|
||
const HelloWorld = () => ( | ||
<> | ||
<div>Hello</div> | ||
</> | ||
); | ||
``` | ||
|
||
次のようになります: | ||
|
||
```tsx twoslash | ||
// @showEmit | ||
// @showEmittedFile: index.js | ||
// @jsxFactory: h | ||
// @jsxFragmentFactory: Fragment | ||
// @noErrors | ||
// @target: esnext | ||
// @module: commonjs | ||
|
||
import { h, Fragment } from "preact"; | ||
|
||
const HelloWorld = () => ( | ||
<> | ||
<div>Hello</div> | ||
</> | ||
); | ||
``` | ||
|
||
このオプションは[Babelの`/* @jsxFrag h */`ディレクティブ](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#fragments)とよく似ており、ファイル単位で使用できます。 | ||
|
||
例: | ||
|
||
```tsx twoslash | ||
/** @jsx h */ | ||
/** @jsxFrag Fragment */ | ||
|
||
import { h, Fragment } from "preact"; | ||
|
||
const HelloWorld = () => ( | ||
<> | ||
<div>Hello</div> | ||
</> | ||
); | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
--- | ||
display: "jsxImportSource" | ||
oneline: "The module specifier for importing the jsx factory functions" | ||
--- | ||
|
||
TypeScript 4.1で導入された`"react-jsx"`や`"react-jsxdev"`を[`jsx`](#jsx)に指定する際に`jsx`と`jsxs`のファクトリ関数をインポートするモジュール指定子を宣言します。 | ||
|
||
[React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)では、それぞれのインポートによる新しいJSXの変換がサポートされています。 | ||
|
||
例えば、このコードで: | ||
|
||
```tsx | ||
import React from "react"; | ||
|
||
function App() { | ||
return <h1>Hello World</h1>; | ||
} | ||
``` | ||
|
||
次のようなTSConfigの場合: | ||
|
||
```json tsconfig | ||
{ | ||
"compilerOptions": { | ||
"target": "esnext", | ||
"module": "commonjs", | ||
"jsx": "react-jsx" | ||
} | ||
} | ||
``` | ||
|
||
TypeScriptからコンパイルされるJavaScriptは次のようになります: | ||
|
||
```tsx twoslash | ||
// @showEmit | ||
// @noErrors | ||
// @jsx: react-jsx | ||
// @module: commonjs | ||
// @target: esnext | ||
declare module JSX { | ||
interface Element {} | ||
interface IntrinsicElements { | ||
[s: string]: any; | ||
} | ||
} | ||
import React from "react"; | ||
|
||
function App() { | ||
return <h1>Hello World</h1>; | ||
} | ||
``` | ||
|
||
`"jsxImportSource": "preact"`を使用する場合、tsconfigは次のようになり: | ||
|
||
```json tsconfig | ||
{ | ||
"compilerOptions": { | ||
"target": "esnext", | ||
"module": "commonjs", | ||
"jsx": "react-jsx", | ||
"jsxImportSource": "preact", | ||
"types": ["preact"] | ||
} | ||
} | ||
``` | ||
|
||
以下のようなコードが生成されます: | ||
|
||
```tsx twoslash | ||
// @showEmit | ||
// @jsxImportSource: preact | ||
// @types: preact | ||
// @jsx: react-jsx | ||
// @target: esnext | ||
// @module: commonjs | ||
// @noErrors | ||
|
||
export function App() { | ||
return <h1>Hello World</h1>; | ||
} | ||
``` | ||
|
||
あるいは、ファイル単位のディレクティブを使ってこのオプションを設定することもできます。例えば: | ||
|
||
```tsx | ||
/** @jsxImportSource preact */ | ||
|
||
export function App() { | ||
return <h1>Hello World</h1>; | ||
} | ||
``` | ||
|
||
これにより、`_jsx`ファクトリをインポートする`preact/jsx-runtime`が追加されます。 | ||
|
||
_注意:_ このオプションを期待通りに動作させるには、`tsx`ファイルに`export`または`import`を含める必要があります。これにより、ファイルはモジュールとみなされます。 |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,53 @@ | ||||||
--- | ||||||
display: "noUncheckedIndexedAccess" | ||||||
oneline: "Add undefined to a type when accessed using an index" | ||||||
--- | ||||||
|
||||||
TypeScriptには、オブジェクトにおいて未知のキーを持ちながらも値が既知であるプロパティをインデックスシグネチャで記述する方法があります。 | ||||||
|
||||||
```ts twoslash | ||||||
interface EnvironmentVars { | ||||||
NAME: string; | ||||||
OS: string; | ||||||
|
||||||
// 未知のプロパティは、次のようなインデックスシグネチャで扱うことができます。 | ||||||
[propName: string]: string; | ||||||
} | ||||||
|
||||||
declare const env: EnvironmentVars; | ||||||
|
||||||
// 既存のプロパティとして宣言されています | ||||||
const sysName = env.NAME; | ||||||
const os = env.OS; | ||||||
// ^? | ||||||
|
||||||
// 宣言されていませんが、インデックス | ||||||
// シグネチャのおかげで、stringとして扱われます | ||||||
const nodeEnd = env.NODE_ENV; | ||||||
// ^? | ||||||
``` | ||||||
|
||||||
`noUncheckedIndexedAccess`をオンにすると、型の未定義のフィールドに`undefined`が追加されます。 | ||||||
|
||||||
```ts twoslash | ||||||
interface EnvironmentVars { | ||||||
NAME: string; | ||||||
OS: string; | ||||||
|
||||||
// 未知のプロパティは、次のようなインデックスシグネチャで扱うことができます。 | ||||||
[propName: string]: string; | ||||||
} | ||||||
// @noUncheckedIndexedAccess | ||||||
// ---cut--- | ||||||
declare const env: EnvironmentVars; | ||||||
|
||||||
// 既存のプロパティとして宣言されています | ||||||
const sysName = env.NAME; | ||||||
const os = env.OS; | ||||||
// ^? | ||||||
|
||||||
// 宣言されていませんが、インデックス | ||||||
// シグネチャのおかげで、stringとして扱われます | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. これも元のドキュメントが微妙に間違っているので、PRを出してもらえると 👍
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Discordで聞いてみたので、それの返信を待ちましょう There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ありがとうございます |
||||||
const nodeEnd = env.NODE_ENV; | ||||||
// ^? | ||||||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
--- | ||
display: "watchDirectory" | ||
oneline: "Determine how directories are watched" | ||
--- | ||
|
||
再帰的なファイル監視機能を持たないシステムで、ディレクトリツリー全体を監視する方法を指定します。 | ||
|
||
- `fixedPollingInterval`: すべてのディレクトリの変更を一定間隔で毎秒数回チェックします。 | ||
- `dynamicPriorityPolling`: 変更頻度の低いディレクトリがチェックされる頻度が低くなるような動的なキューを使用します。 | ||
- `useFsEvents` (デフォルト): オペレーティングシステム/ファイルシステムのネイティブイベントの使用をディレクトリの変更に試みます。 | ||
uraway marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
--- | ||
display: "watchFile" | ||
oneline: "What technique should the watcher use" | ||
--- | ||
|
||
個々のファイルを監視する方法を指定します。 | ||
|
||
- `fixedPollingInterval`: すべてのファイルの変更を一定間隔で毎秒数回チェックします。 | ||
- `priorityPollingInterval`: すべてのファイルの変更を毎秒数回チェックしますが、ヒューリスティックスを使用して他のファイルよりも少ない頻度で特定のタイプのファイルをチェックします。 | ||
- `dynamicPriorityPolling`: 変更頻度の低いファイルがチェックされる頻度が低くなるような動的なキューを使用します。 | ||
- `useFsEvents` (デフォルト): オペレーティングシステム/ファイルシステムのネイティブイベントの使用をファイルの変更に試みます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 上と同様 |
||
- `useFsEventsOnParentDirectory`: ファイルの親ディレクトリでオペレーティングシステム/ファイルシステムのネイティブイベントを使用を試み、変更をリッスンします。 | ||
uraway marked this conversation as resolved.
Show resolved
Hide resolved
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
### コンパイラオプション | ||
|
||
これらのオプションはTypeScriptの設定の大部分を占めており、TypeScriptがどのように動作すべきかを扱います。 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
### ルートフィールド | ||
|
||
まずは、TSConfigのルートオプションです - これらのオプションはTypeScriptやJavaScriptプロジェクトの設定方法に関連したものです。 |
Uh oh!
There was an error while loading. Please reload this page.