TypeScript(一)TypeScript培養類型思惟

TypeScript培養類型思惟

前言：接下來暫停Flutter更新，開始更新TypeScript教程

更新地點： 首發於公衆號，次日更新於掘金、簡書等地方；

更多交流： 能夠添加個人微信 372623326，關注個人微博：coderwhy

但願你們能夠 幫忙轉發，點擊在看，給我更多的創做動力。

前言二：當你點開這篇文章時，我相信你已經在不少地方都已經據說過或者見過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正在慢慢變得愈來愈好，不管是從底層設計仍是應用層面。
• ES六、七、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的標準，因此ES六、ES七、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之後的開發模式必然會和TypeScript更加切合，你們也更多的須要使用TypeScript來編寫代碼；
• 包括目前已經變成最流行的編輯器VSCode也是使用TypeScript來完成的

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

• 包括小程序開發，也是支持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呢？

咱們相信上面的問題大部分你都已經有了答案。

咱們來回答一下學習這個系列文章你須要掌握什麼？

• 首先，咱們須要熟練掌握JavaScript，因此不須要問學習TypeScript還需不須要學習JavaScript這樣的問題了
• 其次，咱們須要掌握常見的ES6語法，某些語法我會在後續的更新中再次提起，可是但願你能夠掌握一些基礎的ES6特性。

從下一篇開始，就讓咱們把TypeScript環境搭建好，開始正式學習它吧！

備註：全部內容首發於公衆號，以後除了Flutter也會更新其餘技術文章，TypeScript、React、Node、數據結構與算法等等，也會更新一些本身的學習心得等，歡迎你們關注