TypeScript培養類型思維

前言：當你點開這篇文章時，我相信你已經在很多地方都已經聽說過或者見過TypeScript了。

但是可能對TypeScript依然有很多問號：TypeScript到底是什么？為什么每個人都在說TypeScript怎么怎么好，到底好在哪里？Angular、Vue3接連使用TypeScript進行了重構是否意味著我們必須掌握TypeScript，它們又為什么要選擇TypeScript？我需要什么樣的基礎才能學會或者說學好TypeScript呢？

沒有關系，在這個章節中我們就來解答上面的疑惑，并且我希望大家學完這個章節可以對一個概念有深入的理解，就是類型思維。

不著急，下面就讓我們和TypeScript有一場美麗的邂逅~

一. JavaScript的痛點

我始終堅信：任何新技術的出現都是為了解決之前某個技術的痛點。

1.1. 優秀的JavaScript

JavaScript是一門優秀的編程語言嗎？

?每個人可能觀點并不完全一致，但是從很多角度來看，JavaScript是一門非常優秀的編程語言。

?而且，可以說在很長一段時間內這個語言不會被代替，并且會在更多的領域被大家廣泛使用。

著名的Atwood定律：

?Stack Overflow的創立者之一的?Jeff Atwood?在2007年提出了著名的?Atwood定律。

?any application that can be written in JavaScript, will eventually be written in JavaScript.

?任何可以使用JavaScript來實現的應用都最終都會使用JavaScript實現。

?其實我們已經看到了，至少目前JavaScript在瀏覽器端依然無可替代，并且在服務端（Nodejs）也在備廣泛的應用。

優秀的JavaScript沒有缺點嗎？

?其實上由于各種歷史因素，JavaScript語言本身存在很多的缺點；

?比如ES5以及之前的使用的var關鍵字關于作用域的問題；

?比如最初JavaScript設計的數組類型并不是連續的內存空間；

?比如直到今天JavaScript也沒有加入類型檢測這一機制；

JavaScript正在慢慢變好

?不可否認的是，JavaScript正在慢慢變得越來越好，無論是從底層設計還是應用層面。

?ES6、7、8等的推出，每次都會讓這門語言更加現代、更加安全、更加方便。

?但是知道今天，JavaScript在類型檢測上依然是毫無進展（為什么類型檢測如此重要，我后面會聊到）。

1.2. 類型引發的問題

首先你需要知道，編程開發中我們有一個共識：錯誤出現的越早越好

?能在寫代碼的時候發現錯誤，就不要在代碼編譯時再發現（IDE的優勢就是在代碼編寫過程中幫助我們發現錯誤）。

?能在代碼編譯期間發現錯誤，就不要在代碼運行期間再發現（類型檢測就可以很好的幫助我們做到這一點）。

?能在開發階段發現錯誤，就不要在測試期間發現錯誤，能在測試期間發現錯誤，就不要在上線后發現錯誤。

現在我們想探究的就是如何在?代碼編譯期間?發現代碼的錯誤：

?JavaScript可以做到嗎？不可以，我們來看下面這段經常可能出現的代碼問題。

function getLength(str) {

? return str.length;

}

console.log("1.正在的代碼執行");

console.log("2.開始函數");

getLength("abc"); // 正確的調用

getLength(); // 錯誤的調用(IDE并不會報錯)

// 當上面的代碼報錯后, 后續所有的代碼都無法繼續正常執行了

console.log("3.調用結束");

在瀏覽器下的運行結果如下：

這是我們一個非常常見的錯誤：

?這個錯誤很大的原因就是因為JavaScript沒有對我們傳入的參數進行任何的限制，只能等到運行期間才發現這個錯誤；

?并且當這個錯誤產生時，會影響后續代碼的繼續執行，也就是整個項目都因為一個小小的錯誤而深入崩潰；

Uncaught TypeError: Cannot read property 'length' of undefined

當然，你可能會想：我怎么可能犯這樣低級的錯誤呢？

?當我們寫像我們上面這樣的簡單的demo時，這樣的錯誤很容易避免，并且當出現錯誤時，也很容易檢查出來；

?但是當我們開發一個大型項目時呢？你能保證自己一定不會出現這樣的問題嗎？而且如果我們是調用別人的類庫，又如何知道讓我們傳入的到底是什么樣的參數呢？

但是，如果我們可以給JavaScript加上很多限制，在開發中就可以很好的避免這樣的問題了：

?比如我們的getLength函數中str是一個必傳的類型，沒有調用者沒有傳編譯期間就會報錯；

?比如我們要求它的必須是一個String類型，傳入其他類型就直接報錯；

?那么就可以知道很多的錯誤問題在編譯期間就被發現，而不是等到運行時再去發現和修改；

1.3. 類型思維的缺失

?我們已經簡單體會到沒有類型檢查帶來的一些問題，JavaScript因為從設計之初就沒有考慮類型的約束問題，所以造成了前端開發人員關于類型思維的缺失：

?前端開發人員通常不關心變量或者參數是什么類型的，如果在必須確定類型時，我們往往需要使用各種判斷驗證；

?從其他方向轉到前端的人員，也會因為沒有類型約束，而總是擔心自己的代碼不安全，不夠健壯；

?所以我們經常會說JavaScript不適合開發大型項目，因為當項目一旦龐大起來，這種寬松的類型約束會帶來非常多的安全隱患，多人員開發它們之間也沒有良好的類型契約。

?比如當我們去實現一個核心類庫時，如果沒有類型約束，那么需要對別人傳入的參數進行各種驗證來保證我們代碼的健壯性；

?比如我們去調用別人的函數，對方沒有對函數進行任何的注釋，我們只能去看里面的邏輯來理解這個函數需要傳入什么參數，返回值是什么類型。

?為了彌補JavaScript類型約束上的缺陷，增加類型約束，很多公司推出了自己的方案：

?2014年，Facebook推出了flow來對JavaScript進行類型檢查；

?同年，Microsoft微軟也推出了TypeScript1.0版本；

?他們都致力于為JavaScript提供類型檢查；

?而現在，無疑TypeScript已經完全勝出：

?Vue2.x的時候采用的就是flow來做類型檢查；

?Vue3.x已經全線轉向TypeScript，98.3%使用TypeScript進行了重構；

?而Angular在很早期就使用TypeScript進行了項目重構并且需要使用TypeScript來進行開發；

?而甚至Facebook公司一些自己的產品也在使用TypeScript；

?學習TypeScript不僅僅可以為我們的代碼增加類型約束，而且可以培養我們前端程序員具備類型思維。

?下面就讓我們今天的主角TypeScript隆重登場吧！

二. 邂逅TypeScript

2.1. 什么是TypeScript

雖然我們已經知道TypeScript是干什么的了，也知道它解決了什么樣的問題，但是我們還是需要全面的來認識一下TypeScript到底是什么？

我們來看一下TypeScript在GitHub和官方上對自己的定義：

GitHub說法：TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TypeScript官網：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

翻譯一下：TypeScript是擁有類型的JavaScript超集，它可以編譯成普通、干凈、完整的JavaScript代碼。

怎么理解上面的話呢？

?我們可以將TypeScript理解成加強版的JavaScript。

?JavaScript所擁有的特性，TypeScript全部都是支持的，并且它緊隨ECMAScript的標準，所以ES6、ES7、ES8等新語法標準，它都是支持的；

?并且在語言層面上，不僅僅增加了類型約束，而且包括一些語法的擴展，比如枚舉類型（Enum）、元組類型（Tuple）等；

?TypeScript在實現新特性的同時，總是保持和ES標準的同步甚至是領先；

?并且TypeScript最終會被編譯成JavaScript代碼，所以你并不需要擔心它的兼容性問題，在編譯時也不需要借助于Babel這樣的工具；

所以，我們可以把TypeScript理解成一身神裝的JavaScript，不僅讓JavaScript更加安全，而且給它帶來了諸多好用的裝備特效；

2.2. TypeScript的特點

官方對TypeScript有幾段特點的描述，我覺得非常到位（雖然有些官方，了解一下），我們一起來分享一下：

始于JavaScript，歸于JavaScript

?

TypeScript從今天數以百萬計的JavaScript開發者所熟悉的語法和語義開始。使用現有的JavaScript代碼，包括流行的JavaScript庫，并從JavaScript代碼中調用TypeScript代碼。

?

?

TypeScript可以編譯出純凈、 簡潔的JavaScript代碼，并且可以運行在任何瀏覽器上、Node.js環境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。

?

TypeScript是一個強大的工具，用于構建大型項目

?

類型允許JavaScript開發者在開發JavaScript應用程序時使用高效的開發工具和常用操作比如靜態檢查和代碼重構。

?

?

類型是可選的，類型推斷讓一些類型的注釋使你的代碼的靜態驗證有很大的不同。類型讓你定義軟件組件之間的接口和洞察現有JavaScript庫的行為。

?

擁有先進的 JavaScript

?

TypeScript提供最新的和不斷發展的JavaScript特性，包括那些來自2015年的ECMAScript和未來的提案中的特性，比如異步功能和Decorators，以幫助建立健壯的組件。

?

?

這些特性為高可信應用程序開發時是可用的，但是會被編譯成簡潔的ECMAScript3（或更新版本）的JavaScript。

?

正是因為有這些特性，TypeScript目前已經在很多地方被應用：

?包括我們前面提到的Vue3和Angular已經使用TypeScript進行重構；

?

vue3源碼

angular源碼

?包括Vue3以后的開發模式必然會和TypeScript更加切合，大家也更多的需要使用TypeScript來編寫代碼；

?包括目前已經變成最流行的編輯器VSCode也是使用TypeScript來完成的

?

?包括在React中已經使用的ant-design的UI庫，也大量使用TypeScript來編寫：

ant-design源碼

?包括小程序開發，也是支持TypeScript的

小程序開發

2.3. 體驗TypeScript

本來想在這個位置放上一個體驗TypeScript的程序，但是涉及到過多TypeScript的安裝流程和vscode的配置信息。

所以，我打算在下一篇中專門講解這部分的內容，包括使用webpack搭建一個可以自動測試TypeScript代碼的環境。

So，稍安勿躁，這一個章節我們就和TypeScript有一個簡單的邂逅就好，后面再進行深入了解。

三. 前端學不動系列

3.1. 前端開發者的難

在之前的Flutter文章中，我說到一個話題，大前端是一群最能或者說最需要折騰的開發者：

?客戶端開發者：從Android到iOS，或者從iOS到Android，到RN，甚至現在越來越多的客戶端開發者接觸前端相關知識（Vue、React、Angular、小程序）；

?前端開發者：從jQuery到AngularJS，到三大框架并行：Vue、React、Angular，還有小程序，甚至現在也要接觸客戶端開發（比如RN、Flutter）；

?目前又面臨著不僅僅學習ES的特性，還要學習TypeScript；

?Vue3馬上也會到來，又必須學習Vue3新特性；

大前端開發就是，不像服務器一樣可能幾年甚至幾十年還是那一套的東西。前端新技術會層出不窮。

但是每一樣技術的出現都會讓驚喜，因為他必然是解決了之前技術的某一個痛點的，而TypeScript真是解決了JavaScript存在的很多設計缺陷，尤其是關于類型檢測的。

并且從開發者長遠的角度來看，學習TypeScript有助于我們前端程序員培養?類型思維，這種思維方式對于完成大型項目尤為重要。

我也會更新一個TypeScript的系列文章，帶著大家一起來學習TypeScript，并且培養大家可以形成類型思維。

3.2. 解除心中的疑惑

回到我們開篇提出的一些疑惑：

TypeScript到底是什么？為什么每個人都在說TypeScript怎么怎么好，到底好在哪里？Angular、Vue3接連使用TypeScript進行了重構是否意味著我們必須掌握TypeScript，它們又為什么要選擇TypeScript？我需要什么樣的基礎才能學會或者說學好TypeScript呢？

看完文章，相信對于上面的問題，你心里應該已經有了答案，之后也會更新其他技術文章，如：TypeScript、React、Node、數據結構與算法等等，也會更新一些自己的學習心得等，歡迎大家添加微信：19950277730，獲取更多干貨分享及學習資源。