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

时间:2018-06-26 12:52:55

标签: typescript compilation ecmascript-next

我尝试搜索有关TypeScripts文档的配置,但似乎找不到简单问题的答案。

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

例如,ES2019登陆,我认为“哦,想让我得到其中的一些”。在那种情况下,我需要升级什么,以使编译器可以进行编译和轮询?

tsconfig中的lib选项使我感到困惑,并且文档对可用库的解释不多。我也不能直接在它们上找到任何东西。

所以可以说ES2019发行了,我为此添加了lib选项(假设会有一个)。这是否意味着我现在可以使用ES2019功能?如果我希望支持从ES2019版本开始的所有内容,我是否需要为其下面的所有其他版本添加库?还是添加ES2019库可以满足我的需求?

这些库来自哪里?它们是否是TypeScript核心库的一部分,因此要获得更多,我必须升级,或者我可以简单地升级单独的程序包就可以了吗?

最后,那些lib提供了全面支持该规范版本所需的一切。还是功能的子集?

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

我意识到这是一个很多问题,因此,非常感谢任何有关任何内容或文档链接的信息。

1 个答案:

答案 0 :(得分:24)

这个故事有点复杂,我们应该将其分为两个部分:语言功能和运行时功能。

ES语言功能

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

Typescript尝试尽快实现所有稳定的语言功能建议,并将它们向下编译为ES版本,该版本指定为编译器的target选项。因此,这意味着如果您拥有最新的Typescript编译器,并增加了对全新ES 2019语言新功能的支持,则可以将其一直向下编译为ES3。 Typescript将发出使这些功能在您要定位的任何ES版本中工作所需的代码。

您现在可以看到它在起作用。如果您以ES5为目标,则箭头函数将编译为常规function,并使用_this局部变量来捕获this。将类编译为一个函数,并编译prototype上的适当字段。

ES运行时功能

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

Typescript不提供此类功能的填充,如果运行时不提供对这些功能的支持,则要使用它们,就需要使用自己的填充实现。

但是,

Typescript确实需要知道运行时存在哪些内置对象以及它们的方法/字段是什么,这是lib选项出现的地方。它允许您指定运行时环境的外观。

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

两者的交集

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

例如,async/await语言功能依赖于promise的存在。因此,如果您使用async/await并以目标es5为目标,则会收到一个错误,指出Promise构造函数不存在。如果您以es5为目标但指定了lib: [ 'es2015', 'dom' ],则不会再出现错误,因为您告诉编译器,即使您希望下编译为es5,运行时{{1 }}构造函数将按照该特定lib中表示的Promise运行时规范存在(而不是编译器的问题,即如何填充,内置填充或内置的运行时行为)。

通常,如果存在这种依赖关系,则打字稿编译器会发出错误消息,指出某些类型丢失,您可以升级您的库,或更改目标(这将更改所使用的默认库),但是您必须确保运行时具有必要的支持。

例外

并非总是可能将语言功能一直向下编译到es2015(由于缺少运行时功能,或者仅由于实现该功能的高成本并没有使其优先级高)对于编译器团队)。例如,在定位es3时使用属性访问器(get / set),这是不受支持的。但是,如果您使用的语言功能/目标组合不受支持,编译器会警告您。