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

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

Typescript版本

compilerOptions

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

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

配置示例

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

可选参数

编译效果（以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

上面的并没有全写，还有一些比如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';