File tree Expand file tree Collapse file tree 9 files changed +253
-0
lines changed Expand file tree Collapse file tree 9 files changed +253
-0
lines changed Original file line number Diff line number Diff line change 1+ ---
2+ display : " disableReferencedProjectLoad"
3+ oneline : " Reduce the number of projects loaded automatically by TypeScript."
4+ ---
5+
6+ 複数プロジェクトのTypeScriptプログラムでは、TypeScriptは利用可能なすべてのプロジェクトをメモリに読み込みます。これにより、「すべての参照元を検索」のような完全なナレッジグラフを必要とするエディタのレスポンスに対して正確な結果を提供することができます。
7+
8+ プロジェクトが大規模な場合は、` disableReferencedProjectLoad ` フラグを使用してすべてのプロジェクトの自動読み込みを無効にすることができます。代わりに、エディタでファイルを開いたときに動的にプロジェクトが読み込まれます。
Original file line number Diff line number Diff line change 1+ ---
2+ display : " jsxFragmentFactory"
3+ oneline : " Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'."
4+ ---
5+
6+ コンパイラオプションに` jsxFactory ` が指定されており、React JSXのコンパイルを目的とする場合に使用されるJSXフラグメントファクトリ関数(例: ` Fragment ` )を指定します。
7+
8+ 例えば、次のTSConfigでは:
9+
10+ ``` json tsconfig
11+ {
12+ "compilerOptions" : {
13+ "target" : " esnext" ,
14+ "module" : " commonjs" ,
15+ "jsx" : " react" ,
16+ "jsxFactory" : " h" ,
17+ "jsxFragmentFactory" : " Fragment"
18+ }
19+ }
20+ ```
21+
22+ このTSXファイルは:
23+
24+ ``` tsx
25+ import { h , Fragment } from " preact" ;
26+
27+ const HelloWorld = () => (
28+ <>
29+ <div >Hello</div >
30+ </>
31+ );
32+ ```
33+
34+ 次のようになります:
35+
36+ ``` tsx twoslash
37+ // @showEmit
38+ // @showEmittedFile: index.js
39+ // @jsxFactory: h
40+ // @jsxFragmentFactory: Fragment
41+ // @noErrors
42+ // @target: esnext
43+ // @module: commonjs
44+
45+ import { h , Fragment } from " preact" ;
46+
47+ const HelloWorld = () => (
48+ <>
49+ <div >Hello</div >
50+ </>
51+ );
52+ ```
53+
54+ このオプションは[ Babelの` /* @jsxFrag h */ ` ディレクティブ] ( https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#fragments ) とよく似ており、ファイル単位で使用できます。
55+
56+ 例:
57+
58+ ``` tsx twoslash
59+ /** @jsx h */
60+ /** @jsxFrag Fragment */
61+
62+ import { h , Fragment } from " preact" ;
63+
64+ const HelloWorld = () => (
65+ <>
66+ <div >Hello</div >
67+ </>
68+ );
69+ ```
Original file line number Diff line number Diff line change 1+ ---
2+ display : " jsxImportSource"
3+ oneline : " Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.`"
4+ ---
5+
6+ TypeScript 4.1で導入された` "react-jsx" ` や` "react-jsxdev" ` を[ ` jsx ` ] ( #jsx ) に指定する際に` jsx ` と` jsxs ` のファクトリ関数をインポートするモジュール指定子を宣言します。
7+
8+ [ React 17] ( https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html ) では、それぞれのインポートによる新しいJSXの変換がサポートされています。
9+
10+ 例えば、このコードで:
11+
12+ ``` tsx
13+ import React from " react" ;
14+
15+ function App() {
16+ return <h1 >Hello World</h1 >;
17+ }
18+ ```
19+
20+ 次のようなTSConfigの場合:
21+
22+ ``` json tsconfig
23+ {
24+ "compilerOptions" : {
25+ "target" : " esnext" ,
26+ "module" : " commonjs" ,
27+ "jsx" : " react-jsx"
28+ }
29+ }
30+ ```
31+
32+ TypeScriptからコンパイルされるJavaScriptは次のようになります:
33+
34+ ``` tsx twoslash
35+ // @showEmit
36+ // @noErrors
37+ // @jsx: react-jsx
38+ // @module: commonjs
39+ // @target: esnext
40+ declare module JSX {
41+ interface Element {}
42+ interface IntrinsicElements {
43+ [s : string ]: any ;
44+ }
45+ }
46+ import React from " react" ;
47+
48+ function App() {
49+ return <h1 >Hello World</h1 >;
50+ }
51+ ```
52+
53+ ` "jsxImportSource": "preact" ` を使用する場合、tsconfigは次のようになり:
54+
55+ ``` json tsconfig
56+ {
57+ "compilerOptions" : {
58+ "target" : " esnext" ,
59+ "module" : " commonjs" ,
60+ "jsx" : " react-jsx" ,
61+ "jsxImportSource" : " preact" ,
62+ "types" : [" preact" ]
63+ }
64+ }
65+ ```
66+
67+ 以下のようなコードが生成されます:
68+
69+ ``` tsx twoslash
70+ // @showEmit
71+ // @jsxImportSource: preact
72+ // @types: preact
73+ // @jsx: react-jsx
74+ // @target: esnext
75+ // @module: commonjs
76+ // @noErrors
77+
78+ export function App() {
79+ return <h1 >Hello World</h1 >;
80+ }
81+ ```
82+
83+ あるいは、ファイル単位のディレクティブを使ってこのオプションを設定することもできます。例えば:
84+
85+ ``` tsx
86+ /** @jsxImportSource preact */
87+
88+ export function App() {
89+ return <h1 >Hello World</h1 >;
90+ }
91+ ```
92+
93+ これにより、` _jsx ` ファクトリをインポートする` preact/jsx-runtime ` が追加されます。
94+
95+ _ 注意:_ このオプションを期待通りに動作させるには、` tsx ` ファイルに` export ` または` import ` を含める必要があります。これにより、ファイルはモジュールとみなされます。
Original file line number Diff line number Diff line change 1+ ---
2+ display : " noUncheckedIndexedAccess"
3+ oneline : " Add `undefined` to a type when accessed using an index."
4+ ---
5+
6+ TypeScriptには、オブジェクトにおいて未知のキーを持ちながらも値が既知であるプロパティをインデックスシグネチャで記述する方法があります。
7+
8+ ``` ts twoslash
9+ interface EnvironmentVars {
10+ NAME: string ;
11+ OS: string ;
12+
13+ // 未知のプロパティは、次のようなインデックスシグネチャで扱うことができます。
14+ [propName : string ]: string ;
15+ }
16+
17+ declare const env: EnvironmentVars ;
18+
19+ // 既存のプロパティとして宣言されています
20+ const sysName = env .NAME ;
21+ const os = env .OS ;
22+ // ^?
23+
24+ // 宣言されていませんが、インデックス
25+ // シグネチャのおかげで、stringとして扱われます
26+ const nodeEnv = env .NODE_ENV ;
27+ // ^?
28+ ```
29+
30+ ` noUncheckedIndexedAccess ` をオンにすると、型の未定義のフィールドに` undefined ` が追加されます。
31+
32+ ``` ts twoslash
33+ interface EnvironmentVars {
34+ NAME: string ;
35+ OS: string ;
36+
37+ // 未知のプロパティは、次のようなインデックスシグネチャで扱うことができます。
38+ [propName : string ]: string ;
39+ }
40+ // @noUncheckedIndexedAccess
41+ // ---cut---
42+ declare const env: EnvironmentVars ;
43+
44+ // 既存のプロパティとして宣言されています
45+ const sysName = env .NAME ;
46+ const os = env .OS ;
47+ // ^?
48+
49+ // 宣言されていませんが、インデックス
50+ // シグネチャのおかげで、stringとして扱われます
51+ const nodeEnv = env .NODE_ENV ;
52+ // ^?
53+ ```
Original file line number Diff line number Diff line change 1+ ---
2+ display : " watchDirectory"
3+ oneline : " Specify how directories are watched on systems that lack recursive file-watching functionality."
4+ ---
5+
6+ 再帰的なファイル監視機能を持たないシステムで、ディレクトリツリー全体を監視する方法を指定します。
7+
8+ - ` fixedPollingInterval ` : すべてのディレクトリの変更を一定間隔で毎秒数回チェックします。
9+ - ` dynamicPriorityPolling ` : 変更頻度の低いディレクトリがチェックされる頻度が低くなるような動的なキューを使用します。
10+ - ` useFsEvents ` (デフォルト): ディレクトリの変更に対するオペレーティングシステム/ファイルシステムのネイティブイベントの使用を試みます。
Original file line number Diff line number Diff line change 1+ ---
2+ display : " watchFile"
3+ oneline : " Specify how the TypeScript watch mode works."
4+ ---
5+
6+ 個々のファイルを監視する方法を指定します。
7+
8+ - ` fixedPollingInterval ` : すべてのファイルの変更を一定間隔で毎秒数回チェックします。
9+ - ` priorityPollingInterval ` : すべてのファイルの変更を毎秒数回チェックしますが、ヒューリスティックスを使用して他のファイルよりも少ない頻度で特定のタイプのファイルをチェックします。
10+ - ` dynamicPriorityPolling ` : 変更頻度の低いファイルがチェックされる頻度が低くなるような動的なキューを使用します。
11+ - ` useFsEvents ` (デフォルト): オペレーティングシステム/ファイルシステムのネイティブイベントの使用をファイルの変更に試みます。
12+ - ` useFsEventsOnParentDirectory ` : ファイルの親ディレクトリの変更を監視するためにオペレーティングシステム/ファイルシステムのネイティブイベントを使用を試みます。
Original file line number Diff line number Diff line change 1+ ### コンパイラオプション
2+
3+ これらのオプションはTypeScriptの設定の大部分を占めており、TypeScriptがどのように動作すべきかを扱います。
Original file line number Diff line number Diff line change 1+ ### ルートフィールド
2+
3+ まずは、TSConfigのルートオプションです - これらのオプションはTypeScriptやJavaScriptプロジェクトの設定方法に関連したものです。
You can’t perform that action at this time.
0 commit comments