Soy un gran fan de TypeScript. Prefiero escribir cada nuevo proyecto en él, en lugar de en JavaScript puro. En este artículo, no discutiré las razones para elegir TypeScript o sus ventajas y desventajas. Quiero que esta publicación sirva como una especie de hoja de trucos para cualquiera que quiera entender cómo personalizar tsconfig
, ordenar sus muchas banderas y tal vez aprender algunos trucos útiles.
Entonces, en este artículo, quiero proporcionar un resumen revisado y ordenado de la documentación, que, estoy seguro, será útil para aquellos que recién están comenzando su viaje en el mundo de TypeScript o para aquellos que, hasta ahora, no lo han hecho. encontró el tiempo y la energía para averiguar los detalles y ahora quiere cerrar esta brecha.
Si abre la referencia oficial tsconfig
, habrá una lista completa de todas las configuraciones, divididas por grupos. Sin embargo, esto no da una idea de por dónde empezar y qué es necesario de esta extensa lista de opciones, y qué puede ignorar (al menos por el momento). Además, a veces las opciones se agrupan según un significado técnico más que lógico. Por ejemplo, algunas marcas de verificación se pueden encontrar en un grupo Strict Checks
, algunas en Linter Checks
y otras en Advanced
. Esto no siempre es fácil de entender.
Todas las opciones, así como el artículo en sí, las dividí en dos grupos: básico y "cheques". En la primera parte del artículo, hablaremos sobre la configuración básica y, en la segunda, sobre varias comprobaciones, es decir, sobre el ajuste del rigor del compilador.
Estructura tsconfig
Consideremos la estructura y algunas características de config.
tsconfig.json
consta de dos partes. Algunas opciones deben especificarse enroot
, y otras encompilerOptions
tsconfig.json
admite comentarios. Los IDE como WebStorm y Visual Studio Code son conscientes de esto y no resaltan los comentarios como errores de sintaxis
tsconfig.json
apoya la herencia. Las opciones pueden dividirse de acuerdo con algún principio, describirse en diferentes archivos y combinarse usando una directiva especial
Este es nuestro disco 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
.
, . . .