在TypeScript中使用最新的JavaScript功能，例如ES2018 [英] Using latest JavaScript features in TypeScript, such as ES2018

问题描述

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

I have tried searching through TypeScripts documentation on their configurtion and can't seem to find the answer to what should be a simple question.

简单地说，一个配置打字稿编译器，以便它知道我们在使用什么JavaScript功能集？

Simply, how does one configure the typescript compiler so that it knows what JavaScript feature sets we are using?

例如，ES2019登陆，我认为哦，想让我了解其中的一些内容 。在那种情况下，我需要升级什么，以使编译器可以进行编译和轮询？

So for example, ES2019 lands and i think 'Ohh want to get me some of that'. In that situation what do i need to upgrade, to allow the compiler to transpile and pollyfill what it needs to?

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

The lib option in the tsconfig confuses me and the docs don't explain much about the available libraries. I can't find anything on them directly either.

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

So lets say ES2019 comes out and i add the lib option for it (Assuming there will be one). Does that mean i can now use ES2019 features? If i wish to support everything from ES2019 down do i need to add the libs for every other version below it? Or does adding the ES2019 lib provide all i need?

这些库来自哪里？它们是否是TypeScript核心库的一部分，因此要获得更多，我必须升级，或者我可以简单地升级单独的程序包，然后一切正常吗？

Where do those libraries come from? Are they part of the core TypeScript libarary and so to get more i have to upgrade, or can i simply upgrade a seperate package and it will all work?

lib提供了全面支持该规范版本所需的一切。还是它是功能的子集？

Finally do those lib provide every needed to fully support that version of the spec. Or is it a subset of features?

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

In our project we currently use TypeScript Version 2.5.3

I意识到这是一个很大的问题，因此不胜感激有关任何内容或文档链接的任何信息。

I realize thats a whole lot of questions so any information on anything, or links to documentation, would be greatly appreciated.

推荐答案

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

The story is a bit more complex, and we should begin by separating it in two: language features and runtime features.

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

When we say language features we mean changes to the core JavaScript language syntax. For example ES 2015 adds support for classes, arrow functions (=>), and for-of iteration

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

Typescript tries to implement all stable language features proposals as soon as possible and will down-compile them to the ES version specified as the target option to the compiler. So this means if you have the latest Typescript compiler, which adds support for a fresh new ES 2019 language feature, you will be able to down-compile it all the way down to ES3. Typescript will emit the code necessary to make such features work in whatever version of ES you are targeting.

您现在就可以看到它的作用。如果您定位 ES5 ，则将箭头函数编译为常规的函数 s并使用 _this 本地变量来捕获 this 。将类编译为函数，并在 prototype 集合上设置适当的字段。

And you can see this in action now. If you target ES5, arrow functions are compiled into regular functions and use a _this local variable to captures this. Classes are compiled to a function and the apropriate fields on the prototype set.

除了语言功能外，我们还有某些运行时功能，它们描述了对象类型可用，这些运行时对象具有哪些方法和字段。 ES 的最新版本中新对象类型的示例为 Promise 或 Proxy 。

In addition to the language features, we have certain runtime features that describe what built-in object types are available, and what methods and fields those runtime objects have. Examples of new object types in recent versions of ES would be Promise or Proxy.

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

Typescript does not provide poly-fills for such features, if the runtime does not offer support for these you will need to come with your own poly-fill implementation if you want to use them.

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

Typescript does however need to know what built-in objects exist at runtime and what their methods/fields are, this is where the lib option comes in. It allows you to specify what the runtime environment will look like.

因此，您可以例如定位 es5 ，但是指定运行时将在其中包含所有内置对象符合 es2015 标准（某些可能由运行时本身实现，其他可能由您通过poly-fills添加）

So you could for example target es5, but specify that the runtime will have all the build-in objects in conformance with the es2015 standard (some might be implemented by the runtime itself, others may be added by you through poly-fills)

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

The division above is a simplification, in that some language features rely on the existence of certain built-in objects and methods.

例如， async / await 语言功能依赖于promise的存在。因此，如果您使用 async / await 并将目标 es5 定位为目标，则会收到错误，提示 Promise 构造函数不存在。如果您定位 es5 ，但指定了 lib：['es2015'，'dom'] ，您将不再获得您告诉编译器的错误，即使您希望向下编译为 es5 ，在运行时 Promise 构造函数也会按照该特定lib中表示的 es2015 运行时规范存在（不是编译器的问题，它如何发生，多边形填充或内置的运行时行为）。

For example, the async/await language feature relies on the existence of promises. So if you use async/await and target es5 you will get an error that the Promise constructor does not exist. If you target es5 but you specify lib: [ 'es2015', 'dom' ] you will no longer get an error as you have told the compiler that even though you wish to down compile to es5, at runtime the Promise constructor will exist as per the es2015 runtime specification represented in that particular lib(not the compiler's problem how this will happen, poly-fills or built-in runtime behavior).

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

Generally if such a reliance exists, the typescript compiler will issue an error that certain types are missing and you can upgrade your lib, or change your target (which will change the default libs used), but you will have to ensure that the runtime has the necessary support.

始终可以将语言功能一直向下编译到 es3 （可能是由于缺少运行时功能，或者仅仅是因为实现f的成本很高） eature并不使它成为编译器团队的优先事项）。例如，定位 es3 get / set ） $ c>，不受支持。但是，如果您使用的语言功能/目标组合不受支持，则编译器应向您发出警告。

It might not always be possible to down-compile language features all the way down to es3 (either because of missing runtime features, or just because of the high cost of implementing the feature does not make it a priority for the compiler team). An example would be property accessors (get/set) when targeting es3, which is unsupported. The compiler should warn you however if you are using an unsupported language feature/ target combination.

这篇关于在TypeScript中使用最新的JavaScript功能，例如ES2018的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！