1. 程式人生 > >Angular 4入門教程系列:9:TypeScript:ECMAScript之前世今生

Angular 4入門教程系列:9:TypeScript:ECMAScript之前世今生

這裡寫圖片描述
在以例子為主的官方介紹中,我們學習到了npm install typescript,也看過tsconfig.json的typescript配置檔案的配置檔案,比如裡面寫的ES5到底是什麼。另外那些.ts的檔案,都是typescript的,跟angular有什麼關係,這篇文章將會介紹一下最基礎的知識,大體對其有些概念上的認識。

Angular與typescript

typescript

typescript是javascript的超集,是由微軟開發的開源的程式語言,對javascript進行了可選的型別檢查和類與介面等概念。

安德斯·海爾斯伯格

這裡寫圖片描述
1960年出生于丹麥的安德斯·海爾斯伯格(Anders Hejlsberg)被稱為typescript之父,同時他也是Delphi和c#的父親。作為C#的首席架構師,他向javascript中新增面向物件的程式設計特性方面可謂得心應手。

版本釋出

從2012年公開首個版本,typescript在2017年11月1號已經發布了2.6版本。

時間 版本和說明
2012/10 首個公開版本
2014/4 1.0
2014/10/8 從1.1.0.1開始在github上進行託管
2018/8/31 2.0 RC
2017/11/1 2.6

為何選擇typescript

Angular2開始google的團隊使用typescript對angular進行了重構。其實除去typescript,類似封裝javascript的語言不止一家,也包括google當初準備使用的自己的atscript。為什麼選擇typescript,除了非技術性因素之外,作為曾經的angular核心團隊成員,Victor Savkin的看法如下

  • Typescript有豐富的工具
  • 是javascript的超集
  • 可以進行更好的抽象設計
  • 易於閱讀和理解
  • 依然可以使用javascript的生態系統

Typescript和JavaScript

Javascript原生似乎看起來不是很招人待見,其實更多的原因則是相反,而是javascript太熱了,而且現在的前端也遠遠不是十年前的前端在做的的事情,要複雜的多,催生出了與之相關的無數的框架和語言。所以我們靜下心來,看一下20年前的javascript。
1994年的Netscape推出了名噪一時的Navigator0.9版本,這是第一個成熟的瀏覽器,但是碰到的問題是無法與使用者進行互動,所有的事情只能有伺服器側去判斷。而緊接著1995年SUN正式推出了Java,敏銳的Netscape公司判斷出了這個”一次構建,處處執行”的語言的未來的可能性,與之合作去試圖解決使用者互動問題,像我這麼老的程式設計師都知道java小程式(applet)的概念,允許java以applet的形式直接執行,這就是當時他們堆出的方案,但是實際還是過於複雜,最終算是夭折了吧。
Netscape決定設計一個”簡化版的java”,而且和當時的SUN也在蜜月期,最終攜手將javascript推向了市場。而這裡面最主要的人物另外一個父親,javascript之父Brendan Eich登場了。

Brendan Eich

這裡寫圖片描述
1961年出生於美國加州的Brendan Eich為Mozilla的CTO,曾擔任過10天CEO,2008年,艾克曾經出資1000美元支援加州的反同性戀婚姻的憲法修正案8號提案。此事2012年被曝光後,艾克就曾經遭到矽谷業內人士和相關媒體的廣泛批評。而Brendan Eich最終也因為這個事情的發酵和他自己倔強的態度不得不辭職。
而在1995年4月,年僅34歲的Brendan Eich被Netscape所僱傭,給他的任務就是做這個“簡化版java”的設計。而設計原型由高層決定為java,Brendan Eich本人很不喜歡java,據說10天就交了作業。Brendan Eich本人對自己現在風靡一時的作品並不滿意,應用文學家Johnson的話對自己的作品進行自嘲:the part that is good is not original, and the part that is original is not good.人生就是這樣,往往有心插花未必能開,無心栽柳綠柳成蔭。

JavaScript與ECMAScript

除了Netscape和SUN合力推出的javascript,微軟於1996年同IE3.0也一同釋出了JScript。當我們說IE中的javascript的時候,一般指的是JScript, 另外還有Cenvi的ScriptEase。於是三種客戶端指令碼語言同時存在,於是ECMAScript應運而生。

兩個組織

組織 全稱 說明
ECMA European Computer Manufacturers Association 歐洲計算機制造商協會
ISO/IEC International Organization for Standardization/International Electro technical Commission 國際標準化組織

ECMAScript-262

ECMAScript-262: JavaScript的標準化
ECMAScript標準目前已經到了第八個版本,自從1997年的第一版之後,ECMAScript得到了及其快速的發展和接受。ECMAScript是基於一些既有的技術諸如NetScape的Javascript和Microsoft的JScript。規範說明的詳細地址:http://www.ecma-international.org/ecma-262/#

TC39

ECMAScript歷史

  • ECMAScript語言規格的規範開始於1996年11月,第一版Ecma標準釋出於1997年6月。
  • 1998年4月,Ecma第二版釋出,同時ECMA標準提也交給國際標準化組織ISO/IEC,並作為ISO/IEC 16262獲得批准
  • 1999年12月,Ecma第三版攜同強大的正則表達,更好的字元處理功能,try/catch的異常處理機制等進行了釋出
  • 2007年10月,Ecma的第四版草案對第三版做了大幅升級,一經發出便引起巨大爭論。以微軟和google為首的 大廠商進行了激烈的反對,提議小幅改動,而Javascript的爸爸Brendan Eich為首的改革派毫不退讓,最終此版夭折,最終以小幅的變更,作為EcmaScript 3.1進行釋出. 其實在第三版之後,ECMAScript已經得到了廣泛的認可和接受,而第四版也確實做了非常多的重大工作,夭折的第四版一直能引起無數話題
  • 2009年12月, 第五版最終還是在第三版的基礎上增加了一些新的特性而進行了釋出,諸如對JSON物件編碼的支援,以及支援和強化錯誤檢查和程式安全的嚴格模式的提供等特性做了增強。
  • 2015年6月,第六版終於攜帶大量特性進行了真正意義上的強化。從某種意義上來說,由於第四版的夭折帶來的,第六版才是1999年的第三版之後的進一步大幅度特性的增強版,十年磨一劍,這次磨了十五年,帶來了模組/類/非同步程式設計諸如Promises/以及生成器等等. 而從2015年的版本開始了每年更新的程序,而且名稱也變成了ECMAScript YYYY,所以這第六版的名稱一般來說就是ECMAScript 2015
  • 2016年6月,釋出了ECMAScript 2016,增加了陣列方法和一個冪運算子等。嚴格意義上來說,這是TC39使用新的流程之後的第一個版本。
  • 2017年6月,ECMAScript 2017也已經發布,提出了非同步函式/共享記憶體和Atomics/字串填充等增強特性

由於熟悉特性的開發者經常會有ES6/ES7/ES8等用之進行稱呼,簡單整理如下

版本 簡稱 一般稱呼 釋出時間
第1版 ES1 ECMAScript 1 1997年6月
第2版 ES2 ECMAScript 2 1998年4月
第3版 ES3 ECMAScript 3 1999年12月
第4版 ES4 ECMAScript 4 2007年10月草案
第5版 ES5 ECMAScript 5 2009年12月
第6版 ES6 ECMAScript 2015 2015年6月
第7版 ES7 ECMAScript 2016 2016年6月
第8版 ES8 ECMAScript 2017 2017年6月

PS:因為第4版是隻有草案的夭折版本,所以沒有嚴格意義上的ES4。

六大瀏覽器&渲染引擎&javascript引擎

項番 瀏覽器 公司 核心 javascript引擎
No.1 Chrome Google WebKit V8
No.2 Firefox Mozilla Gecko SpiderMonkey
No.3 IE 微軟 Trident Chakra
No.4 Safari 蘋果 WebKit JavaScriptCore
No.5 Edge 微軟 Trident Chakra
No.5 Opera Opera Software ASA Presto Carakan

以下附上2017年10月由statcounter提供的全球瀏覽器市場份額佔比:
這裡寫圖片描述

之所以列在這裡是因為目前ECMAScript的評審的規範是至少有2個javascrip引擎已經支援的特性才能近收入規範的評審,目前核心的javascrip引擎也不會超過5個,基本上需要接近半數共同支援的新特性才能納入視線,短時間內想出現ES6那樣的大規模特性的增加應該是不現實的,因為ES6養個意義上來說是15年的總集,是一個還債的版本。

如何選擇

直接是用原生態的javascript,還是使用typescript/coffeescript等,還是直接按照ES規範寫,到這裡可以重新去在看一下Angular團隊他們選擇typescript的原因,結合自己的情況,進行選擇吧。

tsconfig.json

我們學習angular的時候使用angular cli建立了一個骨架,那個骨架包含29個檔案我們進行了一一簡單的介紹,其中tsconfig.json是typescript的編譯器設定,學習了這篇文章的基礎知識,再來重新看一下這個檔案的內容,相信你會多少理解更多。

/workspace/HelloAngular # cat tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}
/workspace/HelloAngular #

總結

這篇文章學習和回顧了一下javascript和typescript以及ECMAScript相關的一些基礎知識。