私はTypeScriptの大ファンです。私は、純粋なJavaScriptではなく、新しいプロジェクトをそれぞれ作成することを好みます。この記事では、TypeScriptを選択する理由やその長所と短所については説明しません。この投稿を、カスタマイズの方法を理解tsconfig
し、多くのフラグを整理し、いくつかの便利なトリックを学びたい人のための一種のチートシートとして役立てたいと思います。
したがって、この記事では、ドキュメントの改訂および順序付けされたスクイーズを提供したいと思います。これは、TypeScriptの世界で旅を始めたばかりの人、または今までにない人に役立つと確信しています。詳細を理解するための時間とエネルギーを見つけ、今このギャップを埋めたいと考えています。
公式リファレンスを開くと、tsconfig
すべての設定の完全なリストがグループに分けられます。ただし、これでは、この広範なオプションのリストから開始する場所と必要なもの、および無視できるもの（少なくとも当面は）を理解できません。さらに、オプションが論理的な意味ではなく技術的な意味に従ってグループ化される場合があります。たとえば、一部のチェックフラグはグループ内Strict Checks
、一部は内Linter Checks
、その他は内にありAdvanced
ます。これは必ずしも理解しやすいとは限りません。
すべてのオプションと記事自体を、基本と「チェック」の2つのグループに分けました。記事の最初の部分では、基本設定について説明し、2番目の部分では、さまざまなチェック、つまりコンパイラーの厳密さの調整について説明します。
Tsconfig構造
構成の構造といくつかの機能について考えてみましょう。
tsconfig.json
2つの部分で構成されています。一部のオプションはで指定する必要がroot
あり、一部はで指定する必要がありますcompilerOptions
tsconfig.json
コメントをサポートします。WebStormやVisualStudio CodeなどのIDEはこれを認識しており、コメントを構文エラーとして強調表示しません
tsconfig.json
継承をサポートします。オプションは、いくつかの原則に従って分割し、さまざまなファイルに記述し、特別なディレクティブを使用して組み合わせることができます
これは私たちのディスクtsconfig.json
です：
{
// extends
// tsconfig-checks.json
"extends": "./tsconfig-checks.json",
// project-specific
"compilerOptions": {
// ,
}
}
root
: extends
, files
, include
, exclude
, references
, typeAcquisition
. 4. compilerOptions
.
root
compileOnSave
ts-node
. IDE .
root
extends
Type: string | false, default: false.
. , . , . , , . , tsconfig.json
:
{
"compilerOptions": {
//
//
}
}
use-case, . production development . tsconfig-dev.json
:
{
"extends": "./tsconfig.json",
"compilerOptions": {
// , dev
"sourceMap": true,
"watch": true
}
}
, extends
. , . . , .
. , tsc --showConfig
.
files
Type: string[] | false, default: false, include
.
.
{
"compilerOptions": {},
"files": [
"core.ts",
"app.ts"
]
}
.
include
Type string[], default: files
, exclude
.
files
, TypeScript . include
, ["**/*"]
. , . , . , .
{
"compilerOptions": {},
"include": [
"src/**/*",
"tests/**/*"
]
}
, TypeScript .ts
, .tsx
.d.ts
. allowJs
, .js
.jsx
.
src
, ./src
, src/**/*
. ./src
.
, include
exclude
, TypeScript files
. tsc --showConfig
.
exclude
Type: string[], default: ["node_modules", "bower_components", "jspm_packages"].
, , include
. , npm
, bower
jspm
, . , TypeScript outDir
, . , . , . , . . , .
{
"compilerOptions": {},
"exclude": [
"node_modules",
"./src/**/*.spec.ts"
]
}
exclude
, files
.
exclude
, , .
compilerOptions
target
Type: string, default: ES3
, lib
, module
.
ECMAScript, . : ES3
, ES5
, ES6
( ES2015
), ES2016
, ES2017
, ES2018
, ES2019
, ES2020
, ESNext
. backend / ES6
, Node.js
ES5
, . ES6
, , 97.29% . frontend .
module
Type: string, default: target
, moduleResolution
.
, . : None
, CommonJS
, AMD
, System
, UMD
, ES6
, ES2015
, ES2020
or ESNext
. backend / ES6
CommonJS
Node.js
, . frontend ES6
. , UMD
.
moduleResolution
Type: string, default: module
.
, . : node
classic
. classic
99% , legacy. , , . module
moduleResolution
classic
.
, node
.
lib
Type: string[], default: target
.
target
, TypeScript (*.d.ts-
) . , target
ES6
, TypeScript array.find
, . target
ES5
, find
, JavaScript. . , , TypeScript , , lib
. , ES2015
, ES2015.Core
( find
, findIndex
. .).
, , .
--target ES5 : DOM, ES5, ScriptHost --target ES6: DOM, ES6, DOM.Iterable, ScriptHost
- lib
. , , DOM
:
{
"compilerOptions": {
"target": "ES5",
"lib": [
"DOM",
"ES2015.Core"
]
}
}
outDir
Type: string, default: .
, . : .js
, .d.ts
, .js.map
. , . .gitignore
. . , .
outDir
:
├── module
│ └── core.js
│ └── core.ts
├── index.js
└── index.ts
outDir
:
├── dist
│ └── module
│ | └── core.js
│ └── index.js
├── module
│ └── core.ts
└── index.ts
outFile
Type: string, default: none.
, . , webpack
… , module
None
, System
, or AMD
. , CommonJS
or ES6
. outFile
. , , .
allowSyntheticDefaultImports
Type: boolean, default: module
esModuleInterop
.
- default import
, ts-loader
babel-loader
. , d.ts-
. , :
//
import * as React from 'react';
//
import React from 'react';
, esModuleInterop
module
=== "system".
esModuleInterop
Type: boolean, default: false.
, CommonJS
ES6
.
// moment CommonJS
// ES6
import Moment from 'moment';
// esModuleInterop undefined
console.log(Moment);
// c [object Object]
console.log(Moment);
allowSyntheticDefaultImports
. .
alwaysStrict
Type: boolean, default: strict
.
strict mode
“use strict”
.
false, strict
, true.
downlevelIteration
Type: boolean, default: false.
ES6
: for / of
, array spread
, arguments spread
. ES5
, for / of
for
:
// es6
const str = 'Hello!';
for (const s of str) {
console.log(s);
}
// es5 downlevelIteration
var str = "Hello!";
for (var _i = 0, str_1 = str; _i < str_1.length; _i++) {
var s = str_1[_i];
console.log(s);
}
, , emoji
. . . , . downlevelIteration
"", . , . , playground target -> es5
, downlevelIteration -> true
.
, , Symbol.iterator
. .
forceConsistentCasingInFileNames
Type: boolean, default: false.
(case-sensitive) . , case-insensitive import FileManager from './FileManager.ts'
, fileManager.ts
, . . TypeScript - .
compilerOptions,
declaration
Type: boolean, default: false.
, JavaScript , -, d.ts
- . js . js
, d.ts
-. , , npm
. , JavaScript, TypeScript.
declarationDir
Type: string, default: none, declaration
.
js
-. d.ts
- .
emitDeclarationOnly
Type: boolean, default: false, declaration
.
- d.ts
-, js
-.
allowJs
Type: boolean, default: false.
JavaScript TypeScript . allowJs
TypeScript ts
, js
. , . , . TypeScript.
checkJs
Type: boolean, default: false, allowJs
.
TypeScript ts
, js
-. JavaScript, TS- jsDoc . , . , jsDoc, .
4.1 checkJs
, allowJs
.
experimentalDecorators emitDecoratorMetadata
Type: boolean, default: false.
experimentalDecorators
, emitDecoratorMetadata
-, .
emitDecoratorMetadata
reflect-metadata.
resolveJsonModule
Type: boolean, default: false.
*.json
. .
// .json
import config from './config.json'
jsx
Type: string, default: none.
React, jsx
. react
react-native
. jsx-
preserve
react-jsx
react-jsxdev
.
, . . .