Ich bin ein großer TypeScript-Fan. Ich schreibe lieber jedes neue Projekt darin als in reinem JavaScript. In diesem Artikel werde ich nicht auf die Gründe für die Wahl von TypeScript oder seine Vor- und Nachteile eingehen. Ich möchte, dass dieser Beitrag als eine Art Spickzettel für alle dient, die verstehen möchten, wie tsconfig
man die vielen Flaggen anpasst , sortiert und vielleicht einige nützliche Tricks lernt.
Daher möchte ich in diesem Artikel einen überarbeiteten und geordneten Überblick über die Dokumentation geben, der sicher für diejenigen nützlich sein wird, die gerade ihre Reise in die TypeScript-Welt beginnen, oder für diejenigen, die dies bisher noch nicht getan haben fand die Zeit und Energie, um die Details herauszufinden und möchte nun diese Lücke schließen.
Wenn Sie die offizielle Referenz öffnen tsconfig
, wird eine vollständige Liste aller Einstellungen angezeigt, die in Gruppen unterteilt sind. Dies gibt jedoch kein Verständnis dafür, wo Sie anfangen sollen und was aus dieser umfangreichen Liste von Optionen erforderlich ist und was Sie (zumindest vorerst) ignorieren können. Außerdem werden Optionen manchmal eher nach einer technischen als nach einer logischen Bedeutung gruppiert. Beispielsweise können einige Prüfkennzeichen in einer Gruppe gefunden werden Strict Checks
, einige in Linter Checks
und andere in Advanced
. Das ist nicht immer leicht zu verstehen.
Alle Optionen sowie der Artikel selbst habe ich in zwei Gruppen unterteilt - Basic und "Checks". Im ersten Teil des Artikels werden wir über Grundeinstellungen und im zweiten Teil über verschiedene Überprüfungen sprechen, dh über die Optimierung der Strenge des Compilers.
Tsconfig-Struktur
Betrachten wir die Struktur und einige Funktionen der Konfiguration.
tsconfig.json
besteht aus zwei Teilen. Einige Optionen müssen inroot
und einige in angegeben werdencompilerOptions
tsconfig.json
unterstützt Kommentare. IDEs wie WebStorm und Visual Studio Code sind sich dessen bewusst und markieren Kommentare nicht als Syntaxfehler
tsconfig.json
unterstützt die Vererbung. Optionen können nach einem Prinzip unterteilt, in verschiedenen Dateien beschrieben und mithilfe einer speziellen Anweisung kombiniert werden
Das ist unsere Scheibe 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
.
, . . .