Skip to content

[ja] tsconfig/options, tsconfig/sections #38

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

Merged
merged 2 commits into from
Mar 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/tsconfig/ja/options/disableReferencedProjectLoad.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
display: "disableReferencedProjectLoad"
oneline: "Reduce the number of projects loaded automatically by TypeScript."
---

複数プロジェクトのTypeScriptプログラムでは、TypeScriptは利用可能なすべてのプロジェクトをメモリに読み込みます。これにより、「すべての参照元を検索」のような完全なナレッジグラフを必要とするエディタのレスポンスに対して正確な結果を提供することができます。

プロジェクトが大規模な場合は、`disableReferencedProjectLoad`フラグを使用してすべてのプロジェクトの自動読み込みを無効にすることができます。代わりに、エディタでファイルを開いたときに動的にプロジェクトが読み込まれます。
69 changes: 69 additions & 0 deletions docs/tsconfig/ja/options/jsxFragmentFactory.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
display: "jsxFragmentFactory"
oneline: "Specify the JSX Fragment reference used for fragments 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>
</>
);
```
95 changes: 95 additions & 0 deletions docs/tsconfig/ja/options/jsxImportSource.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
display: "jsxImportSource"
oneline: "Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.`"
---

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`を含める必要があります。これにより、ファイルはモジュールとみなされます。
53 changes: 53 additions & 0 deletions docs/tsconfig/ja/options/noUncheckedIndexedAccess.md
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 nodeEnv = 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として扱われます
const nodeEnv = env.NODE_ENV;
// ^?
```
10 changes: 10 additions & 0 deletions docs/tsconfig/ja/options/watchDirectory.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
display: "watchDirectory"
oneline: "Specify how directories are watched on systems that lack recursive file-watching functionality."
---

再帰的なファイル監視機能を持たないシステムで、ディレクトリツリー全体を監視する方法を指定します。

- `fixedPollingInterval`: すべてのディレクトリの変更を一定間隔で毎秒数回チェックします。
- `dynamicPriorityPolling`: 変更頻度の低いディレクトリがチェックされる頻度が低くなるような動的なキューを使用します。
- `useFsEvents` (デフォルト): ディレクトリの変更に対するオペレーティングシステム/ファイルシステムのネイティブイベントの使用を試みます。
12 changes: 12 additions & 0 deletions docs/tsconfig/ja/options/watchFile.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
display: "watchFile"
oneline: "Specify how the TypeScript watch mode works."
---

個々のファイルを監視する方法を指定します。

- `fixedPollingInterval`: すべてのファイルの変更を一定間隔で毎秒数回チェックします。
- `priorityPollingInterval`: すべてのファイルの変更を毎秒数回チェックしますが、ヒューリスティックスを使用して他のファイルよりも少ない頻度で特定のタイプのファイルをチェックします。
- `dynamicPriorityPolling`: 変更頻度の低いファイルがチェックされる頻度が低くなるような動的なキューを使用します。
- `useFsEvents` (デフォルト): オペレーティングシステム/ファイルシステムのネイティブイベントの使用をファイルの変更に試みます。
- `useFsEventsOnParentDirectory`: ファイルの親ディレクトリの変更を監視するためにオペレーティングシステム/ファイルシステムのネイティブイベントを使用を試みます。
3 changes: 3 additions & 0 deletions docs/tsconfig/ja/sections/compilerOptions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
### コンパイラオプション

これらのオプションはTypeScriptの設定の大部分を占めており、TypeScriptがどのように動作すべきかを扱います。
3 changes: 3 additions & 0 deletions docs/tsconfig/ja/sections/top_level.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
### ルートフィールド

まずは、TSConfigのルートオプションです - これらのオプションはTypeScriptやJavaScriptプロジェクトの設定方法に関連したものです。
Empty file.