tsconfig编译属性target详解

作用

指定输出代码的 ECMAScript 目标版本 “ES3”（默认）

可选版本

es3、es5、es6、es2015、es2016、es2017、es2018、es2019、es2020、es2021、es2022、esnext

• 其中 es6 就是 es2015
• 然后后续的 es2016 对应的就是 es7 依次类推， es2019 对应 es10
• esnext: 一个动态的概念，指的是 ECMAScript 的下一个版本，指当前最新发布的版本没有包含。

编译示例

拿最简单的 ES5 以及 ES6 举例

const a = 8;

ES5 编译结果如下

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a = 8;

ES6 编译结果如下

const a = 1;
export {};

测试一下可选链操作符(es2020 提供)

const a = {
	name: 'fnn',
	age: 18
}

const b = a?.age

当我们采用 ES6 输出时

const a = {
    name: 'fnn',
    age: 18
};
const b = a === null || a === void 0 ? void 0 : a.age;
export {};

当我们将 target 设置为 es2020，可以发现输出并没有被转换

const a = {
    name: 'fnn',
    age: 18
};
const b = a?.age;
export {};

总结

设置 target 为什么版本要取决于当前开发的项目需要兼容到什么版本的浏览器（浏览器对 ES 兼容到哪一个版本），所以不能轻易的设置为 esnext，以及其他新的版本。