typescript 自 2018 年起支持 ES6 (ECMAScript 2015)

ES6 (ECMAScript 2015) support as of 2018

提问by xpt

As a long time programmer just getting into JavaScript programming, I have the following questions that are still unclear despite having read many articles.

作为一个刚刚接触 JavaScript 编程的长期程序员，尽管阅读了很多文章，但我有以下问题仍然不清楚。

• Looking at the ES6 (ECMAScript 2015) support by browsers, I can see that the supporting level is much less than that of Node.js, so the question is,
• If both Node.jsand browsers are using the modern V8 engine, why supporting level are so different?
• Looking at the ES6 support in Node.js, I can see really really few ES6 features are unsupported now. However, what exactly does the supportedmeans in the chart? I.e.,
• Does it means even I write using the support ES6 features, I still need to use the Babel compiler to compile ES6 code to ES5for Node.js to use it?
• For TypeScript ES6-style JavaScript code that runs for Node.js, they are still need to be transpiled into an ES5 compatible form, despite that Node.js almost cover all ES6 featues, right? I.e.,

• 查看浏览器对ES6 (ECMAScript 2015) 的支持，我可以看到支持水平远低于 Node.js，所以问题是，
• 如果Node.js和浏览器都使用现代 V8 引擎，为什么支持级别如此不同？
• 看看Node.js中的ES6 支持，我可以看到现在真的很少有 ES6 特性不受支持。但是，图表中受支持的确切含义是什么？IE，
• 这是否意味着即使我使用支持 ES6 的特性来编写，我仍然需要使用 Babel 编译器将 ES6 代码编译为 ES5，以便 Node.js 使用它？
• 对于为 Node.js 运行的 TypeScript ES6 风格的 JavaScript 代码，它们仍然需要转换成 ES5 兼容的形式，尽管 Node.js 几乎涵盖了所有 ES6 特性，对吧？IE，

for the following code,

对于以下代码，

class Animal {
    constructor(public name) { }
    move(meters) {
        console.log(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    move() {
        console.log("Slithering...");
        super.move(5);
    }
}

class Horse extends Animal {
    move() {
        console.log("Galloping...");
        super.move(45);
    }

var sam = new Snake("Sammy the Python")
var tom: Animal = new Horse("Tommy the Palomino")

sam.move()
tom.move(34)

Does it need to be transpiled into an ES5 compatible form to runs with Node.js or not?

它是否需要转译为 ES5 兼容形式才能与 Node.js 一起运行？

Finally, any online site that I can try playing with TypeScript/ES6 code like above?

最后，任何我可以尝试使用上述 TypeScript/ES6 代码的在线网站？

• I copy it to my chrome console, and got an error that I don't understand - Unexpected strict mode reserved word, and
• I tried it on http://www.typescriptlang.org/play/index.html, but the consoleoutput is not working there.

• 我将它复制到我的 chrome 控制台，并得到一个我不明白的错误 - Unexpected strict mode reserved word，和
• 我在http://www.typescriptlang.org/play/index.html上尝试过，但console输出在那里不起作用。

Please help. thx.

请帮忙。谢谢。

回答by jfriend00

Looking at the ES6 (ECMAScript 2015) support by browsers, I can see that the supporting level is much less than that of Node.js, so the question is,

查看浏览器对 ES6 (ECMAScript 2015) 的支持，我可以看到支持水平远低于 Node.js，所以问题是，

Many different browsers and many different Javascript engines in them, each with their own level of ES6 support. The latest version of node.js is generally pretty up-to-date on what the V8 engine supports. Many browsers have longer release cycles and may not be as current, but each is different and has their own release strategy and level of ES6 support.

许多不同的浏览器和其中的许多不同的 Javascript 引擎，每个都有自己的 ES6 支持级别。最新版本的 node.js 通常是 V8 引擎支持的最新版本。许多浏览器的发布周期更长，可能不是最新的，但每个浏览器都不同，有自己的发布策略和 ES6 支持级别。

If both Node.js and browsers are using the modern V8 engine, why supporting level are so different?

如果 Node.js 和浏览器都使用现代 V8 引擎，为什么支持级别如此不同？

If you compare the latest release of node.js with the latest release of Chrome on Windows, you won't see much difference in support. The ES6 support chart you're looking at seems old to me. For example, Chrome has had support for the Setobject for a long time, but your chart says false.

如果将最新版本的 node.js 与 Windows 上最新版本的 Chrome 进行比较，您将看不到支持方面的太大差异。您正在查看的 ES6 支持图表对我来说似乎很旧。例如，Chrome 长期以来一直支持该Set对象，但您的图表显示false.

Looking at the ES6 support in Node.js, I can see really really few ES6 features are unsupported now. However, what exactly does the supported means in the chart? I.e.,

看看 Node.js 中的 ES6 支持，我可以看到现在真的很少有 ES6 特性不受支持。但是，图表中受支持的确切含义是什么？IE，

Supported means you can use the feature directly without a transpiler, but how accurate that is depends upon the source of the document claiming it. Some documents do extensive testing of all the various edge cases of a given feature. Others just look for general implementation. So if for example, you're looking at support for the Setobject and it says "supported", then that is suppose to mean that you can just write plain Javascript that uses the Setobject and it will just work. How accurate that document is depends upon the source of their data and the thoroughness of their testing.

支持意味着您可以在没有转译器的情况下直接使用该功能，但其准确度取决于声明该功能的文档来源。一些文档对给定特征的所有各种边缘情况进行了广泛的测试。其他人只是寻找一般实现。因此，例如，如果您正在查看对Set对象的支持并且它说“支持”，那么这意味着您可以编写使用该Set对象的普通 Javascript并且它会正常工作。该文件的准确性取决于他们的数据来源和测试的彻底性。

Does it means even I write using the support ES6 features, I still need to use the Babel compiler to compile ES6 code to ES5 for Node.js to use it?

这是否意味着即使我使用支持 ES6 的特性来编写，我仍然需要使用 Babel 编译器将 ES6 代码编译为 ES5，以便 Node.js 使用它？

No. In a Javascript engine that supports a given feature in ES6, you can write ES6 code for that feature and directly run it in that Javascript engine. No transpiling is needed.

不可以。在支持 ES6 中给定功能的 Javascript 引擎中，您可以为该功能编写 ES6 代码并直接在该 Javascript 引擎中运行它。不需要转译。

For TypeScript ES6-style JavaScript code that runs for Node.js, they are still need to be transpiled into an ES5 compatible form, despite that Node.js almost cover all ES6 featues, right? I.e.,

对于为 Node.js 运行的 TypeScript ES6 风格的 JavaScript 代码，它们仍然需要转换成 ES5 兼容的形式，尽管 Node.js 几乎涵盖了所有 ES6 特性，对吧？IE，

The class definitions you show are plain ES6 code. Those will work just fine as is in an ES6 capable Javascript engine.

您显示的类定义是普通的 ES6 代码。这些将在支持 ES6 的 Javascript 引擎中正常工作。

If you write Typescript code, then you will have to transpile the TypeScript to Javascript because no Javascript engine (I know of) supports TypeScript directly. When transpiling form TypeScript to Javascript, you can usually specify whether you want the transpiler to generate ES5 compatible code (which will run in an ES5 engine or an ES6 engine) or ES6 compatible code (which will only run in an ES6 engine) depending upon what your target environment is capable of.

如果您编写 Typescript 代码，那么您必须将 TypeScript 转换为 Javascript，因为没有 Javascript 引擎（我知道）直接支持 TypeScript。在将 TypeScript 转译为 Javascript 时，您通常可以指定是希望转译器生成 ES5 兼容代码（将在 ES5 引擎或 ES6 引擎中运行）还是 ES6 兼容代码（将仅在 ES6 引擎中运行），具体取决于你的目标环境有什么能力。

Does it need to be transpiled into an ES5 compatible form to runs with Node.js or not?

它是否需要转译为 ES5 兼容形式才能与 Node.js 一起运行？

Your particular code appears to contain at least one TypeScript style variable declaration which would need to be transpiled. The rest looks like plain ES6 Javascript which should work in any ES6 engine without transpiling.

您的特定代码似乎至少包含一个需要转换的 TypeScript 样式变量声明。其余的看起来像普通的 ES6 Javascript，它应该可以在任何 ES6 引擎中运行而无需转译。

When I remove the TypeScript, fix some syntax errors in your code and implement the Animalconstructor properly, then this code works fine in node.js v8.8.1 (which is what I currently have installed) and in Chrome 63.0.3239.132, Edge 41.16299.15.0 and Firefox 57.0.4 all on Windows 10:

当我删除 TypeScript，修复代码中的一些语法错误并Animal正确实现构造函数时，此代码在 node.js v8.8.1（这是我目前安装的）和 Chrome 63.0.3239.132、Edge 41.16299 中正常工作。 15.0 和 Firefox 57.0.4 都在 Windows 10 上：

    // Generic ES6 code

    class Animal {
        constructor(name) { 
            this.name = name;
        }
        move(meters) {
            console.log(this.name + " moved " + meters + "m.");
        }
    }
    
    class Snake extends Animal {
        move() {
            console.log("Slithering...");
            super.move(5);
        }
    }
    
    class Horse extends Animal {
        move() {
            console.log("Galloping...");
            super.move(45);
        }
    }
    
    var sam = new Snake("Sammy the Python");
    var tom = new Horse("Tommy the Palomino");
    
    sam.move();
    tom.move(34);

You can run this snippet yourself in any browser you desired to see the results (assuming the browser is modern enough to support a stack overflow snipppet). It works in all the current versions of browsers I have except IE 11.192.16299.0 (no surprise that IE doesn't support ES6).

您可以在任何想要查看结果的浏览器中自行运行此代码段（假设浏览器足够现代以支持堆栈溢出代码段）。它适用于我拥有的所有当前版本的浏览器，除了 IE 11.192.16299.0（IE 不支持 ES6 并不奇怪）。

I copy it to my chrome console, and got an error that I don't understand - Unexpected strict mode reserved word,

我将它复制到我的 chrome 控制台，并得到一个我不明白的错误 - 意外的严格模式保留字，

This happened to me when I tried to run your code in node.js until I removed the TypeScript from it so that it was just plain ES6. I think this particular error is caused by the publicin this line:

当我尝试在 node.js 中运行您的代码时，这发生在我身上，直到我从中删除了 TypeScript，使其成为普通的 ES6。我认为这个特殊的错误是由public这一行引起的：

constructor(public name) { }

since that is not part of the ES6 specification (it's apparently part of TypeScript).

因为那不是 ES6 规范的一部分（它显然是 TypeScript 的一部分）。

It seems that there's one question you're dying to ask, but haven't exactly articulated is: "How do you know whether you have to transpile or not?".

似乎有一个您很想问但尚未明确表达的问题是：“您如何知道是否必须转译？”。

The answer is that you have to understand the cross between the target environments you wish to run in and the newest features you plan to use. If you are writing server-side code that will only run in node.js, then it's a lot simpler. Examine a comprehensive table such as http://node.green/, study what it says for the node.js version you plan to use and the feature in question. If it indicates you should be able to use that feature, then write your code using that feature, write a test case for it and verify that both the code you wrote and the feature you are using both work. Add that to your body of knowledge about what you can and can't use in that version of node.js. You can then assume all future versions of node.js will also support that feature.

答案是您必须了解您希望运行的目标环境与您计划使用的最新功能之间的交叉。如果您正在编写只能在 node.js 中运行的服务器端代码，那么它就简单多了。检查一个综合表，例如http://node.green/，研究它对您计划使用的 node.js 版本和相关功能的说明。如果它表明您应该能够使用该功能，则使用该功能编写代码，为其编写测试用例并验证您编写的代码和您正在使用的功能都有效。将其添加到您的知识体系中，了解在该版本的 node.js 中您可以使用和不可以使用的内容。然后，您可以假设 node.js 的所有未来版本也将支持该功能。

If you're writing code to run in a browser, life is much more complicated. If you plan to support a lot of browsers and really don't want to worry about ES6 support at all, then just transpile to an ES5 target and go about your business.

如果您正在编写在浏览器中运行的代码，那么生活要复杂得多。如果您计划支持很多浏览器并且真的不想担心 ES6 支持，那么只需转换为 ES5 目标并开始您的业务。

If you want to use non-transpiled code, then you have a lot of testing to do in a lot of browsers. You have to first specify exactly which versions of which browsers you are going to support and then you have to write your code and test cases and you have to test in every browser you plan to support. There really is no shortcut. When you find things that don't work, you'll have to either look for polyfills or work-arounds or stop using that ES6 feature.

如果您想使用非转译代码，那么您需要在许多浏览器中进行大量测试。您必须首先准确指定您将支持哪些浏览器的哪个版本，然后您必须编写代码和测试用例，并且必须在您计划支持的每个浏览器中进行测试。真的没有捷径可走。当你发现一些不起作用的东西时，你要么寻找 polyfills 或变通办法，要么停止使用 ES6 特性。

回答by guest271314

Test the code in the environments that the code is going to be used in. Use the available means to implement the specific standard or specification within the environment that you are using the code at. Or try to create an approach yourself to resolve an issue that you encounter during development of your code while noting the progressions and persistent issue for others to be able to possibly address and resolve the issue, bug or requirement from their own perspective.

在将要使用代码的环境中测试代码。使用可用的方法在您使用代码的环境中实现特定的标准或规范。或者尝试自己创建一种方法来解决您在代码开发过程中遇到的问题，同时注意进展和持续存在的问题，以便其他人能够从他们自己的角度解决和解决问题、错误或需求。

Simply due to the fact the a document states that the browser has implemented a specification or standard does not mean that the implementation is consistent with the specification, or implemented at all. The only way to verify whether a browser implements a standard is to test with code yourself. File issues and attempt to fix bugs yourself.

仅仅因为文档声明浏览器已经实现了规范或标准并不意味着实现与规范一致，或者根本没有实现。验证浏览器是否实现标准的唯一方法是自己用代码进行测试。归档问题并尝试自己修复错误。

Browsers use different engines including Gecko, WebKit, not V8alone; and can change over time in both name and implementations of specifications; see Monitor and potentially deprecate support for multitrack SourceBuffer support of 'sequence' AppendMode; How to use "segments" mode at SourceBuffer of MediaSource to render same result at Chomium, Chorme and Firefox?. There are many browsers. For example, Lynxdoes not use V8.

浏览器使用不同的引擎，包括Gecko、WebKit，而不仅仅是V8；并且可以随时间改变规范的名称和实现；请参阅监控并可能弃用对“序列” AppendMode 的多轨 SourceBuffer 支持的支持；如何在 MediaSource 的 SourceBuffer 中使用“segments”模式在 Chomium、Chorme 和 Firefox 上呈现相同的结果？. 有很多浏览器。例如，Lynx不使用 V8。

See web platform tests

查看网络平台测试

The web-platform-tests Project is a W3C-coordinated attempt to build a cross-browser testsuite for the Web-platform stack. Writing tests in a way that allows them to be run in all browsers gives browser projects confidence that they are shipping software that is compatible with other implementations, and that later implementations will be compatible with their implementations. This in turn gives Web authors/developers confidence that they can actually rely on the Web platform to deliver on the promise of working across browsers and devices without needing extra layers of abstraction to paper over the gaps left by specification editors and implementors.

web-platform-tests 项目是 W3C 协调的尝试，旨在为 Web 平台堆栈构建跨浏览器测试套件。以允许它们在所有浏览器中运行的方式编写测试使浏览器项目相信他们正在发布与其他实现兼容的软件，并且以后的实现将与它们的实现兼容。这反过来又让 Web 作者/开发人员相信他们实际上可以依靠 Web 平台来实现跨浏览器和设备工作的承诺，而无需额外的抽象层来弥补规范编辑器和实现者留下的空白。

For example, one test for Web Speech API, where volumeproperty is specified as capable of being set, though was not able to detect a change of audio output for either Chromium or Firefox when setting the volumeproperty of SpeechSynthesisUtteranceto different values within the specified ranges.

例如，对Web Speech API 的一项测试，其中volume属性被指定为能够设置，但在将volume属性设置SpeechSynthesisUtterance为指定范围内的不同值时，无法检测到 Chromium 或 Firefox 的音频输出变化。

Specifications are a totally different regime than actual browser implementations. Specifications or standards can be and are written well in advance of actual browser implementation, if implemented at all. You can use browserify, or write the code yourself to use NodeJS modules or other non-native code in the browser.

规范与实际的浏览器实现完全不同。规范或标准可以并且已经在实际浏览器实现之前编写好，如果完全实现的话。您可以使用browserify，也可以自己编写代码在浏览器中使用 NodeJS 模块或其他非本机代码。