Saya penggemar berat TypeScript. Saya lebih suka menulis setiap proyek baru di dalamnya, daripada di JavaScript murni. Pada artikel ini, saya tidak akan membahas alasan memilih TypeScript atau kelebihan dan kekurangannya. Saya ingin posting ini berfungsi sebagai semacam contekan bagi siapa saja yang ingin memahami cara menyesuaikan tsconfig
, memilah banyak benderanya, dan mungkin mempelajari beberapa trik yang berguna.
Jadi, dalam artikel ini, saya ingin memberikan dokumentasi yang direvisi dan teratur, yang, saya yakin, akan berguna bagi mereka yang baru memulai perjalanan mereka di dunia TypeScript atau mereka yang, sampai sekarang, belum menemukan waktu dan energi untuk mencari tahu detailnya dan sekarang ingin menutup celah ini.
Jika Anda membuka referensi resmi tsconfig
, maka akan ada daftar lengkap semua pengaturan, dibagi menjadi beberapa grup. Namun, ini tidak memberikan pemahaman tentang di mana harus memulai dan apa yang diperlukan dari daftar opsi yang luas ini, dan apa yang dapat Anda abaikan (setidaknya untuk saat ini). Plus, terkadang opsi dikelompokkan menurut beberapa arti teknis daripada logis. Misalnya, beberapa tanda centang dapat ditemukan di grup Strict Checks
, beberapa di Linter Checks
, dan lainnya di Advanced
. Ini tidak selalu mudah untuk dimengerti.
Semua opsi, serta artikel itu sendiri, saya telah membagi menjadi dua kelompok - dasar dan "pemeriksaan". Di bagian pertama artikel, kita akan berbicara tentang pengaturan dasar, dan di bagian kedua, tentang berbagai pemeriksaan, yaitu tentang menyetel keketatan kompiler.
Struktur tsconfig
Mari pertimbangkan struktur dan beberapa fitur konfigurasi.
tsconfig.json
terdiri dari dua bagian. Beberapa opsi harus ditentukan diroot
, dan beberapa dicompilerOptions
tsconfig.json
mendukung komentar. IDE seperti WebStorm dan Visual Studio Code menyadari hal ini dan tidak menyorot komentar sebagai kesalahan sintaks
tsconfig.json
mendukung warisan. Opsi dapat dibagi menurut beberapa prinsip, dijelaskan dalam file yang berbeda dan digabungkan menggunakan arahan khusus
Ini adalah cakram kami 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
.
, . . .