Typescript配置文件(tsconfig.json)详解系列一：target和lib

系列文章会一直更新，大家可以收藏加关注。不懂的可以在评论区留言。

Typescript版本

Typescript

5.5.2

compilerOptions

target（将TS编译为JS文件后JS的版本）

如果你使用了比target中定义的javascript更高版本的语法，那么编译后的代码会自动帮你向下降级。

配置示例

{
    compilerOptions: {
        "target": "ES6",
    }
}

可选参数

ES3	在5.5.X中已经废弃
ES5
ES6	和ES2015相同 https://github.com/Microsoft/TypeScript/pull/5272 ecmascript 6 - In TypeScript, what's the difference between the `lib.es6.d.ts` and `lib.es2015.d.ts`? - Stack Overflow
ES2015
ES2016
ES2017
ES2018
ES2019
ES2020
ES2021
ES2022
ES2023
ESNext

编译效果（以ES5， ES6，和ESNext为例）

本来想多写点CASE的，但是编译完的文件太长了。就写了几个比较简单的case

编译前

// ES5
var object = {};
var str = JSON.stringify(object);

// ES6
const nums1 = 1;
let nums2 = 2;
let arr = [1, 2];
[arr[0], arr[1]] = [arr[0], arr[1]];

// ES2016(ES7)
const result = 2 ** 2; // 等效Math.pow(2, 2)

ES3

使用该参数在5.5.X中会报错（执行tsc时）

 Option 'target=ES3' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.

 ES5编译后

"use strict";
var _a;
// ES5
var object = {};
var str = JSON.stringify(object);
// ES6
var nums1 = 1;
var nums2 = 2;
var arr = [1, 2];
_a = [arr[0], arr[1]], arr[0] = _a[0], arr[1] = _a[1];
// ES2016(ES7)
var result = Math.pow(2, 2); // 等效Math.pow(2, 2)

ES6编译后

"use strict";
// ES5
var object = {};
var str = JSON.stringify(object);
// ES6
const nums1 = 1;
let nums2 = 2;
let arr = [1, 2];
[arr[0], arr[1]] = [arr[0], arr[1]];
// ES2016(ES7)
const result = Math.pow(2, 2); // 等效Math.pow(2, 2)

ESNext编译后

"use strict";
// ES5
var object = {};
var str = JSON.stringify(object);
// ES6
const nums1 = 1;
let nums2 = 2;
let arr = [1, 2];
[arr[0], arr[1]] = [arr[0], arr[1]];
// ES2016(ES7)
const result = 2 ** 2; // 等效Math.pow(2, 2)

使用建议

如果TS经过编译后生成的.js文件要直接在浏览器上使用，那么target一定要选择需要兼容浏览器的最低版本。

如果是使用构建工具如Webpack等配合babel使用，那么请将target设置为ESNext，其他的版本兼容问题请交给babel来做。（这样也会加快构建速度）

lib（编译时需要引入的库文件）

这个参数需要配合target来使用，指定不同的target，会自动引入对应的lib库。

在typescript包下有很多*.lib.d.ts文件。

比如target我设置为ES5。那么ES6的一些新的API我是使用不了，如Promise。（但是const ，let 这种关键字还是可以使用）。

执行编译命令也会报错

我想Typescript设置的初衷也是希望你写代码的时候尽量不要使用和target不匹配的API（不匹配的API虽然可以向下兼容但是性能会差些）。

现在我将target改为ES6，此时我再使用Promise不会报错。

我的IDE（Webstorm）Ctrl + 鼠标左键可以跳转到对应的*.lib.ts文件

使用建议

建议target的版本和lib对应就好，如果非要使用高级API，那么就在lib中添加。

{
    compilerOptions: {
        "target": "ES5",
        "lib": ["ES6"], // 如果想使用Promise等
    }
}

另外值得注意的就是你自己配置的lib会完全覆盖target对应参数自带的lib预设。

比如上面的例子中设置了lib为ES6，会覆盖target为ES5的预设。

所以使用dom相关操作的时候会报错（因为javascript可以运行在多个环境）

所以需要根据自己编译后javascript版本的环境来设置lib。

可选参数

详细列表可以看源码：TypeScript/src/lib at main · microsoft/TypeScript · GitHub

ES5	所有 ES3 和 ES5 功能的核心定义
ES2015	ES2015 (也称为 ES6) 中提供的附加API - array.find、、、、、、、、等等Promise。ProxySymbolMapSetReflect
ES6	“ES2015” 的别名
ES2016	ES2016 中提供的附加 API -array.include等。
ES7	“ES2016” 的别名
ES2017	ES2017中提供的附加 API - 、、、、、Object.entries类型数组等。Object.valuesAtomicsSharedArrayBufferdate.formatToParts
ES2018	ES2018 中可用的附加 API - asynciterables promise.finally、、、、等等Intl.PluralRules。regexp.groups
ES2019	ES2019 中可用的附加 API - array.flat、、、、、等等array.flatMap。Object.fromEntriesstring.trimStartstring.trimEnd
ES2020	ES2020 中提供的附加 API -string.matchAll等。
ES2021	ES2021 中提供的附加 API -promise.any等string.replaceAll。
ES2022	ES2022 中提供的附加 API - array.at、RegExp.hasIndices等。
ESNext	ESNext 中提供的附加 API - 随着 JavaScript 规范的发展而变化
DOM	浏览器环境

上面的并没有全写，还有一些比如es2015.collection.d.ts这种相当于我不想用es2015所有功能，只使用一部分API。

引入polyfill

注意：有些API，Typescript在编译的时候不会自动帮你编译成兼容版本。

比如这个例子：我希望我编译后的javascript版本为ES5，并且我想使用ES6的一些新的API。

{
    compilerOptions: {
        "target": "ES5",
        "lib": ["ES6"]
    }
}

比如Promise，但是编译后我发现tsc没有为Promise做向下兼容的处理。

对于这种场景我们需要添加core-js

npm install core-js --save-dev

并在项目中使用它

import 'core-js';