[ja] tsconfig/options, tsconfig/sections

[uraway]

ref: #3

以前、microsoft/TypeScript-Website#1432 でレビューをいただいてマージしてもらったのですが、こちらのリポジトリに反映されていなかったので再掲です

diff: 23d4826

[github-actions]

Thanks for the PR!

This section of the codebase is owned by @sasurau4, @Quramy, and @Naturalclar - if they write a comment saying "LGTM" then it will be merged.

[github-actions]

Translation of disableReferencedProjectLoad.md

---

display: "disableReferencedProjectLoad"

oneline: "Reduce the number of projects loaded automatically by TypeScript."

In a multi-project TypeScript program, TypeScript reads all available projects into memory. This allows you to provide accurate results for editor responses that require a complete knowledge graph, such as Find All Referrer.

If your project is large,disableReferencedProjectLoadYou can use flags to disable automatic loading of all projects. Instead, the project is dynamically loaded when you open the file in the editor.

Translation of jsxFragmentFactory.md

---

display: "jsxFragmentFactory"

oneline: "Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'."

Compiler optionsjsxFactoryis specified, and the JSX fragment factory function used for the purpose of compiling React JSX (e.g., Fragment) is specified.

For example, in the following TSConfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

This TSX file is:

import { h, Fragment } from "preact";

const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

Here's what it looks like:

// @showEmit
// @showEmittedFile: index.js
// @jsxFactory: h
// @jsxFragmentFactory: Fragment
// @noErrors
// @target: esnext
// @module: commonjs

import { h, Fragment } from "preact";

const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

This option isBabel's/* @jsxFrag h */Directiveand can be used on a file-by-file basis.

Example:

/** @jsx h */
/** @jsxFrag Fragment */

import { h, Fragment } from "preact";

const HelloWorld = () => (
  <>
    <div>Hello</div>
  </>
);

Translation of jsxImportSource.md

---

display: "jsxImportSource"

oneline: "Specify module specifier used to import the JSX factory functions when using jsx: react-jsx*.`"

Introduced in TypeScript 4.1"react-jsx"And"react-jsxdev"ThejsxWhen you specifyjsxAndjsxsDeclares a module designe to import factory functions for .

React 17supports the conversion of new JSXs with each import.

For example, in this code:

import React from "react";

function App() {
  return <h1>Hello World</h1>;
}

For TSConfig, such as:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx"
  }
}

JavaScript compiled from TypeScript looks like this:

// @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"When using , tsconfig looks like this:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "types": ["preact"]
  }
}

The code is generated as follows:

// @showEmit
// @jsxImportSource: preact
// @types: preact
// @jsx: react-jsx
// @target: esnext
// @module: commonjs
// @noErrors

export function App() {
  return <h1>Hello World</h1>;
}

Alternatively, you can set this option using file-by-file directives. For instance:

/** @jsxImportSource preact */

export function App() {
  return <h1>Hello World</h1>;
}

By this_jsxImport a factorypreact/jsx-runtimeis added.

Note: To make this option work as expected:tsxIn the fileexportOrimportmust be included. This makes the file considered a module.

Translation of noUncheckedIndexedAccess.md

---

display: "noUncheckedIndexedAccess"

oneline: "Add undefined to a type when accessed using an index."

TypeScript provides an index signature for properties that have unknown keys in an object but who have known values.

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;
//    ^?

noUncheckedIndexedAccessto an undefined field of a type.undefinedis added.

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;
//    ^?

Translation of watchDirectory.md

---

display: "watchDirectory"

oneline: "Specify how directories are watched on systems that lack recursive file-watching functionality."

Specifies how to monitor the entire directory tree on a system that does not have recursive file monitoring capabilities.

• fixedPollingInterval: Check several times per second for changes to all directories at regular intervals.
• dynamicPriorityPolling: Use dynamic queues that make infrequently changed directories checked less frequently.
• useFsEvents (default): Attempts to use native operating system/file system events for directory changes.

Translation of watchFile.md

---

display: "watchFile"

oneline: "Specify how the TypeScript watch mode works."

Specifies how individual files are monitored.

• fixedPollingInterval: Check several times per second for changes to all files at regular intervals.
• priorityPollingInterval: Check changes to all files several times per second, but use heuristics to check for certain types of files less often than others.
• dynamicPriorityPolling: Use dynamic queues that make infrequently modified files checked less frequently.
• useFsEvents (default): Attempts to modify the file by using native events in the operating system/file system.
• useFsEventsOnParentDirectory: Attempts to use native operating system/file system events to monitor changes in the file's parent directory.

Translation of compilerOptions.md

Compiler options

These options make up the majority of TypeScript settings and deal with how TypeScript should work.

Translation of top_level.md

Root field

First of all, TSConfig root options - these options are related to how typescript and JavaScript projects are set up.

Generated by 🚫 dangerJS against 23d4826

[Naturalclar]

LGTM

[github-actions]

Merging because @Naturalclar is a code-owner of all the changes - thanks!