在 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?

最后，这些库是否提供了完全支持该版本规范所需的一切.或者它是功能的一个子集?

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 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 尝试尽快实现所有稳定的语言特性提案，并将它们向下编译为指定为编译器 target 选项的 ES 版本.所以这意味着如果你有最新的 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，箭头函数会被编译成常规的 function 并使用 _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 不为此类功能提供 poly-fill，如果运行时不提供对这些功能的支持，如果您想使用它们，则需要使用自己的 poly-fill 实现.

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 构造函数将按照该特定库中表示的 es2015 运行时规范存在(不是编译器的问题)这将如何发生，poly-fills 或内置运行时行为).

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(要么是因为缺少运行时特性，要么只是因为实现该特性的成本高它是编译器团队的优先事项).一个例子是属性访问器 (get/set)，当目标是 es3 时，这是不受支持的.但是，如果您使用的是不受支持的语言功能/目标组合，编译器会警告您.

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屋！