在 TypeScript 中使用最新的 JavaScript 功能,例如 ES2018

Using latest JavaScript features in TypeScript, such as ES2018

我已经尝试搜索有关其配置的 TypeScripts 文档,但似乎找不到应该是一个简单问题的答案。

简单地说,如何配置打字稿编译器,使其知道我们正在使用哪些 JavaScript 功能集?

例如,ES2019 登陆,我认为 'Ohh want to get me some of that'。在那种情况下,我需要升级什么,以允许编译器转换和 pollyfill 它需要的东西?

tsconfig 中的 lib 选项让我感到困惑,而且文档对可用库的解释不多。我也无法直接在他们身上找到任何东西。

所以假设 ES2019 出来了,我为它添加了 lib 选项(假设会有一个)。这是否意味着我现在可以使用 ES2019 功能?如果我希望支持从 ES2019 开始的所有内容,我是否需要为它下面的每个其他版本添加库?或者添加 ES2019 lib 是否提供了我所需要的一切?

这些库来自哪里?它们是核心 TypeScript 库的一部分,所以为了获得更多我必须升级,或者我可以简单地升级一个单独的包并且它会全部工作吗?

最后,这些库会提供完全支持该版本规范所需的一切。或者它是功能的子集?

在我们的项目中,我们目前使用 TypeScript 版本 2.5.3

我知道有很多问题,所以任何有关任何信息或文档链接的信息,我们将不胜感激。

这个故事有点复杂,我们应该首先将它分为两​​部分:语言特性和运行时特性。

ES 语言特性

当我们说语言功能时,我们指的是对核心 JavaScript 语言语法的更改。例如 ES 2015 添加了对 类、箭头函数 (=>) 和 for-of 迭代

的支持

Typescript 尝试尽快实现所有稳定的语言功能提案,并将它们向下编译为指定为编译器 target 选项的 ES 版本。所以这意味着如果你有最新的 Typescript 编译器,它增加了对全新 ES 2019 语言特性的支持,你将能够将它一直向下编译到 ES3。 Typescript 将发出使这些功能在您所针对的任何版本的 ES 中工作所需的代码。

您现在可以看到它的实际效果。如果你的目标是 ES5,箭头函数会被编译成常规的 functions 并使用 _this 局部变量来捕获 this。 类 被编译为函数和 prototype 集上的适当字段。

ES 运行时特性

除了语言特性之外,我们还有某些运行时特性,这些特性描述了哪些内置对象类型可用,以及这些运行时对象具有哪些方法和字段。 ES 的最新版本中的新对象类型示例为 PromiseProxy

Typescript 不为此类功能提供 poly-fill,如果运行时不提供对这些功能的支持,如果您想使用它们,则需要使用自己的 poly-fill 实现。

然而,Typescript 确实需要知道运行时存在哪些内置对象以及它们的 methods/fields 是什么,这就是 lib 选项的用武之地。它允许您指定运行时的内容环境会是什么样子。

因此您可以例如以 es5 为目标,但指定运行时将拥有符合 es2015 标准的所有内置对象(有些可能由运行时本身实现,其他的可能由您通过 poly-fills 添加)

两者的交集

上面的划分是一种简化,因为一些语言特性依赖于某些内置对象和方法的存在。

例如,async/await 语言功能依赖于承诺的存在。因此,如果您使用 async/await 并以 es5 为目标,您将收到 Promise 构造函数不存在的错误。如果您以 es5 为目标但您指定 lib: [ 'es2015', 'dom' ] 您将不再收到错误,因为您已告诉编译器即使您希望向下编译为 es5,但在运行时 [=22] =] 构造函数将根据该特定库中表示的 es2015 运行时规范存在(不是编译器的问题,这将如何发生,填充或内置运行时行为)。

一般来说,如果存在这种依赖,打字稿编译器会发出错误,指出缺少某些类型,您可以升级您的库,或更改您的目标(这将更改使用的默认库),但您必须确保运行时有必要的支持。

例外情况

可能并不总是可以将语言特性一直向下编译到 es3(要么是因为缺少运行时特性,要么只是因为实现该特性的成本很高而无法实现编译器团队的优先事项)。一个示例是 属性 访问器 (get/set) 在定位 es3 时不受支持。但是,如果您使用不受支持的语言功能/目标组合,编译器会警告您。