大家好，我卡頌。

最近，Typescript v5.0 beta[1]發(fā)布，主打特性是「支持Decorators」。

有同學(xué)會(huì)疑惑，Decorators不是早就有的特性么？各種框架（比如Nest.js、Angular）早就用的飛起，ts不也早就支持了么？

之所以會(huì)有這樣的疑惑，簡單的說，現(xiàn)階段大家使用的是老的Decorators規(guī)范，在ts中使用需要加上--experimentalDecorators flag。而ts本次更新支持的是2022年3月新的Decorator規(guī)范。

這背后更本質(zhì)的原因，涉及到新的JS語法誕生的過程。今天，我們就以Decorators為例聊聊一個(gè)新的JS語法是如何誕生的。

新特性是如何產(chǎn)生的

所有ES?語法的誕生都由國際標(biāo)準(zhǔn)組織Ecma International[2]下屬的TC39（the 39nth Technical Committee）委員會(huì)負(fù)責(zé)。

這是個(gè)會(huì)員制的組織，由入會(huì)的公司、組織推舉的代表組成。這些代表通常是JS?開發(fā)者、學(xué)者或編程語言領(lǐng)域的專家（比如大家熟悉的「賀老」）。國內(nèi)的360、阿里、華為、SujiTech都曾參與TC39。

委員會(huì)定期召開會(huì)議推進(jìn)新的ES語法落地，這套語法落地的流程被稱為The TC39 Process[3]。

值得一提的是，這套流程起源于ES2015[4]，也就是大名鼎鼎的ES6。

ES2015?整個(gè)版本的落地用了整整6年，包含大量新特性。我想這也是為什么提到ES?新特性，很多同學(xué)首先會(huì)想到ES2015?（即ES6）的原因吧。

從ES2017?開始，每年都會(huì)發(fā)布新的版本，包含那些通過The TC39 Process但在上個(gè)版本沒有發(fā)布的特性。

The TC39 Process

整個(gè)流程包含5個(gè)階段，階段0～階段4。接下來簡要介紹下各階段的目標(biāo)。

階段0：稻草人（Strawperson）

階段0被稱為Strawperson?（稻草人），由TC39成員發(fā)起，通常是提出新想法或是對未納入正式的提案進(jìn)行修改。

比如，Decorator提案[5]由「Yehuda Katz」于2014年4月10日提出。

等到這份提案到階段3，已經(jīng)2022年3月了，可想而知一個(gè)新特性的誕生有多不容易。

階段1：提案（Proposal）

階段1被稱為Proposal?（提案），此時(shí)該提案已經(jīng)成為正式提案。該階段主要提出一些具體的問題和解決方案。此時(shí)會(huì)選出一名TC39成員（通常是該提案的發(fā)起者）負(fù)責(zé)推動(dòng)該提案。

繼續(xù)以Decorator提案舉例，他在2015年3月24日到達(dá)階段1。

該階段[6]指明了Decorator的：

• 設(shè)計(jì)目的
• 適用范圍

比如，適用于類本身：

@F("color")
@G
class Foo {
}

適用于類方法：

class Foo {
  @F("color")
  @G
  bar() { }
}

除此之外，還能適用于類的訪問器屬性（getter、setter）、對象字面量、對象的訪問器屬性。

• 語法

在Decorator進(jìn)入階段1的一個(gè)月后，Babel跟進(jìn)了Decorator的polyfill實(shí)現(xiàn)。這個(gè)版本的polyfill被稱為legacy。

我們可以在Babel官網(wǎng)看到，對于Decorator特性存在5個(gè)可選項(xiàng)：

不同版本的可選項(xiàng)對應(yīng)了Decorator提案不同階段的落地時(shí)間，由于不同階段對Decorator規(guī)范提出了修改意見，所以相應(yīng)的，Babel插件也就有了不同可選項(xiàng)。

類似的原因，ts中支持的Decorator也就有了不同版本，這也是造成我們開篇提到問題的本質(zhì)原因。

階段2：草稿（Draft）

階段2被稱為Draft（草稿）。在該階段會(huì)用ES語法盡可能精確地描述提案的語法、語義和API，并提供實(shí)驗(yàn)性的實(shí)現(xiàn)。

到了該階段，意味著提案會(huì)有很大概率出現(xiàn)在正式版本的??ES??中。

Decorator到達(dá)階段2的時(shí)間是2016年7月28日，距離階段1已經(jīng)過去一年多時(shí)間。

階段3：候選人（Candidate）

階段3被稱為Candidate（候選人）。到了該階段，提案基本已經(jīng)定型，僅根據(jù)外部反饋針對關(guān)鍵問題進(jìn)行更改。

ts在最新的v5.0 beta版本中默認(rèn)支持的Decorator就是階段3。

階段4：完成（Finished）

階段4被稱為Finished（完成）。該提案會(huì)出現(xiàn)在正式的規(guī)范文檔中，并在下一個(gè)版本的ES中正式支持。

總結(jié)

語言特性的推進(jìn)是個(gè)蠻長的過程，最終達(dá)成的是多方博弈的結(jié)果。對于ES來說，這些博弈就體現(xiàn)在這4個(gè)階段中。

還是以Decorator舉例，這個(gè)特性在oop框架（比如Angular、Mobx）中是很重要的特性。Angular團(tuán)隊(duì)在實(shí)現(xiàn)Angular2時(shí)，最初考慮用AtScript實(shí)現(xiàn)。

而最終Angular用ts實(shí)現(xiàn)，其中很重要的一個(gè)原因是 —— ts團(tuán)隊(duì)承諾實(shí)現(xiàn)一些AtScript特性，尤其是Decorator。

參考資料

[1]Typescript v5.0 beta:https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/。

[2]Ecma International:https://www.ecma-international.org/。

[3]The TC39 Process:https://tc39.es/process-document/。

[4]ES2015:https://262.ecma-international.org/6.0/。

[5]Decorator提案:https://github.com/tc39/notes/blob/main/meetings/2014-04/apr-10.md。

[6]該階段:https://github.com/wycats/javascript-decorators。