澄清 Typescript 的目标和库设置的功能

Posted 2023-03-07

【中文标题】澄清 Typescript 的目标和库设置的功能

【英文标题】：Clarification on functionality of Typescript's target and lib settings

【发布时间】：2019-10-02 02:02:44

【问题描述】：

当 tsconfig.json 有以下内容时

"target": "es5",
"lib": [ "es6", "dom", "es2017" ]

它似乎没有将 es2017 构造转换为 es5。例如，以下将在 IE11 上失败：

var foo = [1, 2, 3].includes(1);

这是设计使然还是我缺少 tsconfig.json 中的设置？

【参考方案1】：

您可以在此处查看包含方法的列表浏览器兼容性。

这里不支持IE。

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/String/includes

【讨论】：

明白。我的问题是 Typescript 是否会自动将 .includes（或其他 ES2017 语句）转换为 es5。

【参考方案2】：

Typescript 的目标和库设置的功能说明

我认为的简化方式是 target 表示输出 JavaScript 将具有的 语法，lib 表示您的 TypeScript 源代码的 API 成员可以使用。这两个问题的答案有更多细节：

Typescript- What is target in tsconfig? What does the tsconfig option "lib" do?

...它似乎没有将 es2017 构造转换为 es5...这是设计使然还是我缺少 tsconfig.json 中的设置？

你是对的。这是设计使然。 TypeScript 转换为 target 语法；它不会填充 target 中缺少的 API 成员。 Here is a quote 来自 TypeScript 团队的核心成员：

我认为您将转译与自动填充混淆了。 TypeScript 不会像 Babel 那样自动为你填充，但会执行语法降级（例如，用于箭头函数）。如果你想使用 ES6 运行时原型方法，我只需包含一个适当的 ES6 polyfill 及其随附的定义文件。

如果您的 lib 包含 target 运行时中不存在的 API 成员（例如 Array.prototype.include），那么您需要安装提供这些 API 成员的 polyfill。

【讨论】：

这就是我的困惑。箭头函数之类的东西会被转换，但同一规范中的其他功能不会。