TypeScript培養(yǎng)類型思維

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

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

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

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

一. JavaScript的痛點

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

1.1. 優(yōu)秀的JavaScript

JavaScript是一門優(yōu)秀的編程語言嗎？

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

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

著名的Atwood定律：

?Stack Overflow的創(chuàng)立者之一的?Jeff Atwood?在2007年提出了著名的?Atwood定律桨仿。

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

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

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

優(yōu)秀的JavaScript沒有缺點嗎？

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

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

?比如最初JavaScript設計的數組類型并不是連續(xù)的內存空間灿椅；

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

JavaScript正在慢慢變好

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

?ES6、7麻惶、8等的推出馍刮，每次都會讓這門語言更加現代、更加安全窃蹋、更加方便卡啰。

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

1.2. 類型引發(fā)的問題

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

?能在寫代碼的時候發(fā)現錯誤，就不要在代碼編譯時再發(fā)現（IDE的優(yōu)勢就是在代碼編寫過程中幫助我們發(fā)現錯誤）亡脸。

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

?能在開發(fā)階段發(fā)現錯誤浅碾，就不要在測試期間發(fā)現錯誤大州，能在測試期間發(fā)現錯誤，就不要在上線后發(fā)現錯誤垂谢。

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

?JavaScript可以做到嗎厦画？不可以，我們來看下面這段經忱闹欤可能出現的代碼問題根暑。

function getLength(str) {

? return str.length;

}

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

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

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

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

// 當上面的代碼報錯后, 后續(xù)所有的代碼都無法繼續(xù)正常執(zhí)行了

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

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

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

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

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

Uncaught TypeError: Cannot read property 'length' of undefined

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

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

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

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

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

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

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

1.3. 類型思維的缺失

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

?下面就讓我們今天的主角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開發(fā)者所熟悉的語法和語義開始孝扛。使用現有的JavaScript代碼，包括流行的JavaScript庫幽崩，并從JavaScript代碼中調用TypeScript代碼苦始。

?

?

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

?

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

?

類型允許JavaScript開發(fā)者在開發(fā)JavaScript應用程序時使用高效的開發(fā)工具和常用操作比如靜態(tài)檢查和代碼重構咨油。

?

?

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

?

擁有先進的 JavaScript

?

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

?

?

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

?

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

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

?

vue3源碼

angular源碼

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

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

?

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

ant-design源碼

?包括小程序開發(fā)熬北，也是支持TypeScript的

小程序開發(fā)

2.3. 體驗TypeScript

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

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

So整份，稍安勿躁，這一個章節(jié)我們就和TypeScript有一個簡單的邂逅就好籽孙，后面再進行深入了解烈评。

三. 前端學不動系列

3.1. 前端開發(fā)者的難

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

?客戶端開發(fā)者：從Android到iOS讲冠，或者從iOS到Android，到RN适瓦，甚至現在越來越多的客戶端開發(fā)者接觸前端相關知識（Vue竿开、React、Angular玻熙、小程序）否彩；

?前端開發(fā)者：從jQuery到AngularJS，到三大框架并行：Vue嗦随、React列荔、Angular，還有小程序，甚至現在也要接觸客戶端開發(fā)（比如RN贴浙、Flutter）砂吞；

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

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

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

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

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

我也會更新一個TypeScript的系列文章晋辆，帶著大家一起來學習TypeScript，并且培養(yǎng)大家可以形成類型思維宇整。

3.2. 解除心中的疑惑

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

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

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