TypeScript 簡介與優(yōu)勢

本節(jié)首先介紹了 TypeScript 與 JavaScript 的關系，梳理清楚 TypeScript、JavaScript、ECMAScript 這三個名詞所代表的具體含義。另外通過三個方向的闡述說明了為什么要使用 TypeScript，以及現(xiàn)在學習 TypeScript 的必要性。

TypeScript 不是一門全新的語言，TypeScript 是 JavaScript 的超集，它對 JavaScript 進行了一些規(guī)范和補充。學習本教程，請務必擁有 JavaScript 基礎。沒有 JavaScript 基礎的同學，請先學習相關 JavaScript 相關基礎知識。

1. TypeScript 與 JavaScript

1.1 TypeScript 簡介

官方定義：
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

• TypeScript 是 JavaScript 的超集，它可以編譯成純 JavaScript。
• TypeScript 基于 ECMAScript 標準進行拓展，支持 ECMAScript 未來提案中的特性，如裝飾器、異步功能等。
• TypeScript 編譯的 JavaScript 可以在任何瀏覽器運行，TypeScript 編譯工具可以運行在任何操作系統(tǒng)上。
• TypeScript 起源于開發(fā)較大規(guī)模 JavaScript 應用程序的需求。由微軟在2012年發(fā)布了首個公開版本。

從以上特性中可以看到，TypeScript 與 JavaScript 、ECMAScript 有著非常深入的聯(lián)系。在詳細介紹 TypeScript 之前，先來簡單了解一下 ECMAScript 與 JavaScript的發(fā)展。

1.2 ECMAScript

ECMA International: 一個制定技術標準的組織。

ECMA-262：由 ECMA International 發(fā)布。它包含了腳本語言的標準。

ECMAScript: 由 ECMA International 以 ECMA-262 和 ECMA-402 規(guī)范的形式進行標準化的。

JavaScript: 通用腳本編程語言，它遵循了 ECMAScript 標準。 換句話說，JavaScript 是 ECMAScript 的方言。

通過閱讀 ECMAScript 標準，你可以學會怎樣實現(xiàn)一個腳本語言；而通過閱讀 JavaScript 文檔，你可以學會怎樣使用腳本語言編程。

2019年6月，ECMA-262 第10版定義了 ECMAScript 2019 通用編程語言。

1.3 JavaScript版本

說 JavaScript 的版本，實際上就是說它實現(xiàn)了 ECMAScript 標準的哪個版本

2. 為什么要用 TypeScript

2.1 靜態(tài)類型

我已經(jīng)熟練使用 JavaScript，為什么要用 TypeScript 呢？

回答這個問題前，先來看看下面這些 JavaScript 中的常見錯誤：

• Uncaught TypeError: Cannot read property
• TypeError: ‘undefined’ is not an object
• TypeError: null is not an object
• TypeError: Object doesn’t support property
• TypeError: ‘undefined’ is not a function
• TypeError: Cannot read property ‘length’

仔細看下不難發(fā)現(xiàn)，這些錯誤大都是一些比較初級的類型錯誤。

JavaScript 只會在 運行時 才去做數(shù)據(jù)類型檢查，而 TypeScript 作為靜態(tài)類型語言，其數(shù)據(jù)類型是在 編譯期間 確定的，編寫代碼的時候要明確變量的數(shù)據(jù)類型。使用 TypeScript 后，這些低級錯誤將不再發(fā)生。

2.2 三大框架支持

我們學習一門新技術會關心它的生命力問題，如果這門技術在較短時間內(nèi)就要被淘汰，那花費大量的時間學習也是不劃算的。TypeScript 能夠保持長久生命力的另一個原因，就是統(tǒng)治前端的三大框架對 TypeScript 的支持。

• Angular 是 TypeScript 最早的支持者，Angular 官方推薦使用 TypeScript 來創(chuàng)建應用。
• React 雖然經(jīng)常與 Flow 一起使用，但是對 TypeScript 的支持也很友好。
• Vue3.0 正式版即將發(fā)布，由 TypeScript 編寫。

從國內(nèi)的氛圍來看，由前端三大框架引領的 TypeScript 熱潮已經(jīng)涌來，很多招聘要求上也都有了 TypeScript 的身影。

2.3 兼容 JavaScript 的靈活性

TypeScript 雖然嚴謹，但沒有喪失 JavaScript 的靈活性，TypeScript 非常包容：

• TypeScript 通過 tsconfig.json 來配置對類型的檢查嚴格程度。
• 可以把 .js 文件直接重命名為 .ts。
• 可以通過將類型定義為 any 來實現(xiàn)兼容任意類型。
• 即使 TypeScript 編譯錯誤，也可以生成 JavaScript 文件。

這里先簡單介紹下 any 類型，后續(xù)會詳細講解。比如一個 string 類型，在賦值過程中類型是不允許改變的：

let brand: string = 'imooc'
brand = 1  // Type '1' is not assignable to type 'string'.ts(2322)

如果是 any 類型，則允許被賦值為任意類型，這樣就跟我們平時寫 JavaScript 一樣了：

let brand: any = 'imooc'
brand = 1 

基于上面這些特點，一個熟悉 JavaScript 的工程師，在查閱一些 TypeScript 語法后，即可快速上手 TypeScript，加油！

3. 小結(jié)

本節(jié)主要介紹了：

• TypeScript 與 JavaScript 的關系，知道了 TypeScript 是 JavaScript 的超集，可以支持 ECMAScript 的各種新特性。
• 從三個方面論述了“為什么要用 TypeScript”，從中可以看出 TypeScript 已經(jīng)是當前大前端技術棧中非常重要的一環(huán)了。