TypeScript 簡(jiǎn)介與優(yōu)勢(shì)

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

TypeScript 不是一門全新的語言，TypeScript 是 JavaScript 的超集，它對(duì) JavaScript 進(jìn)行了一些規(guī)范和補(bǔ)充。學(xué)習(xí)本教程，請(qǐng)務(wù)必?fù)碛?JavaScript 基礎(chǔ)。沒有 JavaScript 基礎(chǔ)的同學(xué)，請(qǐng)先學(xué)習(xí)相關(guān) JavaScript 相關(guān)基礎(chǔ)知識(shí)。

1. TypeScript 與 JavaScript

1.1 TypeScript 簡(jiǎn)介

官方定義：
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 標(biāo)準(zhǔn)進(jìn)行拓展，支持 ECMAScript 未來提案中的特性，如裝飾器、異步功能等。
• TypeScript 編譯的 JavaScript 可以在任何瀏覽器運(yùn)行，TypeScript 編譯工具可以運(yùn)行在任何操作系統(tǒng)上。
• TypeScript 起源于開發(fā)較大規(guī)模 JavaScript 應(yīng)用程序的需求。由微軟在2012年發(fā)布了首個(gè)公開版本。

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

1.2 ECMAScript

ECMA International: 一個(gè)制定技術(shù)標(biāo)準(zhǔn)的組織。

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

ECMAScript: 由 ECMA International 以 ECMA-262 和 ECMA-402 規(guī)范的形式進(jìn)行標(biāo)準(zhǔn)化的。

JavaScript: 通用腳本編程語言，它遵循了 ECMAScript 標(biāo)準(zhǔn)。 換句話說，JavaScript 是 ECMAScript 的方言。

通過閱讀 ECMAScript 標(biāo)準(zhǔn)，你可以學(xué)會(huì)怎樣實(shí)現(xiàn)一個(gè)腳本語言；而通過閱讀 JavaScript 文檔，你可以學(xué)會(huì)怎樣使用腳本語言編程。

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

1.3 JavaScript版本

說 JavaScript 的版本，實(shí)際上就是說它實(shí)現(xiàn)了 ECMAScript 標(biāo)準(zhǔn)的哪個(gè)版本

2. 為什么要用 TypeScript

2.1 靜態(tài)類型

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

回答這個(gè)問題前，先來看看下面這些 JavaScript 中的常見錯(cuò)誤：

• 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’

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

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

2.2 三大框架支持

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

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

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

2.3 兼容 JavaScript 的靈活性

TypeScript 雖然嚴(yán)謹(jǐn)，但沒有喪失 JavaScript 的靈活性，TypeScript 非常包容：

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

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

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

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

let brand: any = 'imooc'
brand = 1 

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

3. 小結(jié)

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

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