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

前言：作為一名程序員，相信你已經(jīng)熟練掌握了JavaScript語言，由于其應(yīng)用領(lǐng)域非常的廣泛，所以算得上是每一個(gè)程序員必須要掌握的語言。
但是JavaScript自身的缺點(diǎn)，相信每一個(gè)程序員也是深有體會(huì)，約束上的缺陷會(huì)使項(xiàng)目存在極大的安全隱患，所以我們經(jīng)常會(huì)說JavaScript不適合開發(fā)大型項(xiàng)目。
那么要如何解決這個(gè)問題呢？
是否有更好的語言可以彌補(bǔ)JavaScript的缺陷？
本文接下來以JavaScript的痛點(diǎn)展開，總結(jié)了一些由類型引發(fā)的相關(guān)問題，順便帶領(lǐng)大家全面認(rèn)識(shí)TypeScrip。

1.1. 優(yōu)秀的JavaScript
JavaScript是一門優(yōu)秀的編程語言嗎？
?每個(gè)人可能觀點(diǎn)并不完全一致，但是從很多角度來看，JavaScript是一門非常優(yōu)秀的編程語言。
?而且，可以說在很長一段時(shí)間內(nèi)這個(gè)語言不會(huì)被代替，并且會(huì)在更多的領(lǐng)域被大家廣泛使用。
著名的Atwood定律：
?Stack Overflow的創(chuàng)立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律。
?any application that can be written in JavaScript, will eventually be written in JavaScript.
?任何可以使用JavaScript來實(shí)現(xiàn)的應(yīng)用都最終都會(huì)使用JavaScript實(shí)現(xiàn)。
?其實(shí)我們已經(jīng)看到了，至少目前JavaScript在瀏覽器端依然無可替代，并且在服務(wù)端（Nodejs）也在備廣泛的應(yīng)用。
優(yōu)秀的JavaScript沒有缺點(diǎn)嗎？
?其實(shí)上由于各種歷史因素，JavaScript語言本身存在很多的缺點(diǎn)；
?比如ES5以及之前的使用的var關(guān)鍵字關(guān)于作用域的問題；
?比如最初JavaScript設(shè)計(jì)的數(shù)組類型并不是連續(xù)的內(nèi)存空間；
?比如直到今天JavaScript也沒有加入類型檢測這一機(jī)制；
JavaScript正在慢慢變好
?不可否認(rèn)的是，JavaScript正在慢慢變得越來越好，無論是從底層設(shè)計(jì)還是應(yīng)用層面。
?ES6、7、8等的推出，每次都會(huì)讓這門語言更加現(xiàn)代、更加安全、更加方便。
?但是知道今天，JavaScript在類型檢測上依然是毫無進(jìn)展（為什么類型檢測如此重要，我后面會(huì)聊到）。
1.2. 類型引發(fā)的問題
首先你需要知道，編程開發(fā)中我們有一個(gè)共識(shí)：錯(cuò)誤出現(xiàn)的越早越好
?能在寫代碼的時(shí)候發(fā)現(xiàn)錯(cuò)誤，就不要在代碼編譯時(shí)再發(fā)現(xiàn)（IDE的優(yōu)勢就是在代碼編寫過程中幫助我們發(fā)現(xiàn)錯(cuò)誤）。
?能在代碼編譯期間發(fā)現(xiàn)錯(cuò)誤，就不要在代碼運(yùn)行期間再發(fā)現(xiàn)（類型檢測就可以很好的幫助我們做到這一點(diǎn)）。
?能在開發(fā)階段發(fā)現(xiàn)錯(cuò)誤，就不要在測試期間發(fā)現(xiàn)錯(cuò)誤，能在測試期間發(fā)現(xiàn)錯(cuò)誤，就不要在上線后發(fā)現(xiàn)錯(cuò)誤。
現(xiàn)在我們想探究的就是如何在 代碼編譯期間 發(fā)現(xiàn)代碼的錯(cuò)誤：
?JavaScript可以做到嗎？不可以，我們來看下面這段經(jīng)常可能出現(xiàn)的代碼問題。

function getLength(str) {
return str.length;
}

console.log("1.正在的代碼執(zhí)行");
console.log("2.開始函數(shù)");
getLength("abc"); // 正確的調(diào)用
getLength(); // 錯(cuò)誤的調(diào)用(IDE并不會(huì)報(bào)錯(cuò))

// 當(dāng)上面的代碼報(bào)錯(cuò)后, 后續(xù)所有的代碼都無法繼續(xù)正常執(zhí)行了
console.log("3.調(diào)用結(jié)束");

在瀏覽器下的運(yùn)行結(jié)果如下：

image02
這是我們一個(gè)非常常見的錯(cuò)誤：
?這個(gè)錯(cuò)誤很大的原因就是因?yàn)镴avaScript沒有對(duì)我們傳入的參數(shù)進(jìn)行任何的限制，只能等到運(yùn)行期間才發(fā)現(xiàn)這個(gè)錯(cuò)誤；
?并且當(dāng)這個(gè)錯(cuò)誤產(chǎn)生時(shí)，會(huì)影響后續(xù)代碼的繼續(xù)執(zhí)行，也就是整個(gè)項(xiàng)目都因?yàn)橐粋€(gè)小小的錯(cuò)誤而深入崩潰；
Uncaught TypeError: Cannot read property 'length' of undefined
當(dāng)然，你可能會(huì)想：我怎么可能犯這樣低級(jí)的錯(cuò)誤呢？
?當(dāng)我們寫像我們上面這樣的簡單的demo時(shí)，這樣的錯(cuò)誤很容易避免，并且當(dāng)出現(xiàn)錯(cuò)誤時(shí)，也很容易檢查出來；
?但是當(dāng)我們開發(fā)一個(gè)大型項(xiàng)目時(shí)呢？你能保證自己一定不會(huì)出現(xiàn)這樣的問題嗎？而且如果我們是調(diào)用別人的類庫，又如何知道讓我們傳入的到底是什么樣的參數(shù)呢？
但是，如果我們可以給JavaScript加上很多限制，在開發(fā)中就可以很好的避免這樣的問題了：
?比如我們的getLength函數(shù)中str是一個(gè)必傳的類型，沒有調(diào)用者沒有傳編譯期間就會(huì)報(bào)錯(cuò)；
?比如我們要求它的必須是一個(gè)String類型，傳入其他類型就直接報(bào)錯(cuò)；
?那么就可以知道很多的錯(cuò)誤問題在編譯期間就被發(fā)現(xiàn)，而不是等到運(yùn)行時(shí)再去發(fā)現(xiàn)和修改；
1.3. 類型思維的缺失
?我們已經(jīng)簡單體會(huì)到?jīng)]有類型檢查帶來的一些問題，JavaScript因?yàn)閺脑O(shè)計(jì)之初就沒有考慮類型的約束問題，所以造成了前端開發(fā)人員關(guān)于類型思維的缺失：
?前端開發(fā)人員通常不關(guān)心變量或者參數(shù)是什么類型的，如果在必須確定類型時(shí)，我們往往需要使用各種判斷驗(yàn)證；
?從其他方向轉(zhuǎn)到前端的人員，也會(huì)因?yàn)闆]有類型約束，而總是擔(dān)心自己的代碼不安全，不夠健壯；
?所以我們經(jīng)常會(huì)說JavaScript不適合開發(fā)大型項(xiàng)目，因?yàn)楫?dāng)項(xiàng)目一旦龐大起來，這種寬松的類型約束會(huì)帶來非常多的安全隱患，多人員開發(fā)它們之間也沒有良好的類型契約。
?比如當(dāng)我們?nèi)?shí)現(xiàn)一個(gè)核心類庫時(shí)，如果沒有類型約束，那么需要對(duì)別人傳入的參數(shù)進(jìn)行各種驗(yàn)證來保證我們代碼的健壯性；
?比如我們?nèi)フ{(diào)用別人的函數(shù)，對(duì)方?jīng)]有對(duì)函數(shù)進(jìn)行任何的注釋，我們只能去看里面的邏輯來理解這個(gè)函數(shù)需要傳入什么參數(shù)，返回值是什么類型。
?為了彌補(bǔ)JavaScript類型約束上的缺陷，增加類型約束，很多公司推出了自己的方案：
?2014年，F(xiàn)acebook推出了flow來對(duì)JavaScript進(jìn)行類型檢查；
?同年，Microsoft微軟也推出了TypeScript1.0版本；
?他們都致力于為JavaScript提供類型檢查；
?而現(xiàn)在，無疑TypeScript已經(jīng)完全勝出：
?Vue2.x的時(shí)候采用的就是flow來做類型檢查；
?Vue3.x已經(jīng)全線轉(zhuǎn)向TypeScript，98.3%使用TypeScript進(jìn)行了重構(gòu)；
?而Angular在很早期就使用TypeScript進(jìn)行了項(xiàng)目重構(gòu)并且需要使用TypeScript來進(jìn)行開發(fā)；
?而甚至Facebook公司一些自己的產(chǎn)品也在使用TypeScript；
?學(xué)習(xí)TypeScript不僅僅可以為我們的代碼增加類型約束，而且可以培養(yǎng)我們前端程序員具備類型思維。
?下面就讓我們今天的主角TypeScript隆重登場吧！
二. 邂逅TypeScript
2.1. 什么是TypeScript
雖然我們已經(jīng)知道TypeScript是干什么的了，也知道它解決了什么樣的問題，但是我們還是需要全面的來認(rèn)識(shí)一下TypeScript到底是什么？
我們來看一下TypeScript在GitHub和官方上對(duì)自己的定義：

GitHub說法：TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TypeScript官網(wǎng)：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
翻譯一下：TypeScript是擁有類型的JavaScript超集，它可以編譯成普通、干凈、完整的JavaScript代碼。

怎么理解上面的話呢？
?我們可以將TypeScript理解成加強(qiáng)版的JavaScript。
?JavaScript所擁有的特性，TypeScript全部都是支持的，并且它緊隨ECMAScript的標(biāo)準(zhǔn)，所以ES6、ES7、ES8等新語法標(biāo)準(zhǔn)，它都是支持的；
?并且在語言層面上，不僅僅增加了類型約束，而且包括一些語法的擴(kuò)展，比如枚舉類型（Enum）、元組類型（Tuple）等；
?TypeScript在實(shí)現(xiàn)新特性的同時(shí)，總是保持和ES標(biāo)準(zhǔn)的同步甚至是領(lǐng)先；
?并且TypeScript最終會(huì)被編譯成JavaScript代碼，所以你并不需要擔(dān)心它的兼容性問題，在編譯時(shí)也不需要借助于Babel這樣的工具；
所以，我們可以把TypeScript理解成一身神裝的JavaScript，不僅讓JavaScript更加安全，而且給它帶來了諸多好用的裝備特效；
2.2. TypeScript的特點(diǎn)
官方對(duì)TypeScript有幾段特點(diǎn)的描述，我覺得非常到位（雖然有些官方，了解一下），我們一起來分享一下：
始于JavaScript，歸于JavaScript
?
TypeScript從今天數(shù)以百萬計(jì)的JavaScript開發(fā)者所熟悉的語法和語義開始。使用現(xiàn)有的JavaScript代碼，包括流行的JavaScript庫，并從JavaScript代碼中調(diào)用TypeScript代碼。
?
?
TypeScript可以編譯出純凈、 簡潔的JavaScript代碼，并且可以運(yùn)行在任何瀏覽器上、Node.js環(huán)境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。
?
TypeScript是一個(gè)強(qiáng)大的工具，用于構(gòu)建大型項(xiàng)目
?
類型允許JavaScript開發(fā)者在開發(fā)JavaScript應(yīng)用程序時(shí)使用高效的開發(fā)工具和常用操作比如靜態(tài)檢查和代碼重構(gòu)。
?
?
類型是可選的，類型推斷讓一些類型的注釋使你的代碼的靜態(tài)驗(yàn)證有很大的不同。類型讓你定義軟件組件之間的接口和洞察現(xiàn)有JavaScript庫的行為。
?
擁有先進(jìn)的 JavaScript
?
TypeScript提供最新的和不斷發(fā)展的JavaScript特性，包括那些來自2015年的ECMAScript和未來的提案中的特性，比如異步功能和Decorators，以幫助建立健壯的組件。
?
?
這些特性為高可信應(yīng)用程序開發(fā)時(shí)是可用的，但是會(huì)被編譯成簡潔的ECMAScript3（或更新版本）的JavaScript。
?
正是因?yàn)橛羞@些特性，TypeScript目前已經(jīng)在很多地方被應(yīng)用：
?包括我們前面提到的Vue3和Angular已經(jīng)使用TypeScript進(jìn)行重構(gòu)；
image03
?
vue3源碼

image04

angular源碼

?包括Vue3以后的開發(fā)模式必然會(huì)和TypeScript更加切合，大家也更多的需要使用TypeScript來編寫代碼；
?包括目前已經(jīng)變成最流行的編輯器VSCode也是使用TypeScript來完成的
?
image05

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

image06

ant-design源碼
?包括小程序開發(fā)，也是支持TypeScript的

image07

小程序開發(fā)
2.3. 體驗(yàn)TypeScript
本來想在這個(gè)位置放上一個(gè)體驗(yàn)TypeScript的程序，但是涉及到過多TypeScript的安裝流程和vscode的配置信息。
所以，我打算在下一篇中專門講解這部分的內(nèi)容，包括使用webpack搭建一個(gè)可以自動(dòng)測試TypeScript代碼的環(huán)境。
So，稍安勿躁，這一個(gè)章節(jié)我們就和TypeScript有一個(gè)簡單的邂逅就好，后面再進(jìn)行深入了解。
三. 前端學(xué)不動(dòng)系列
3.1. 前端開發(fā)者的難
在之前的Flutter文章中，我說到一個(gè)話題，大前端是一群最能或者說最需要折騰的開發(fā)者：
?客戶端開發(fā)者：從Android到iOS，或者從iOS到Android，到RN，甚至現(xiàn)在越來越多的客戶端開發(fā)者接觸前端相關(guān)知識(shí)（Vue、React、Angular、小程序）；
?前端開發(fā)者：從jQuery到AngularJS，到三大框架并行：Vue、React、Angular，還有小程序，甚至現(xiàn)在也要接觸客戶端開發(fā)（比如RN、Flutter）；
?目前又面臨著不僅僅學(xué)習(xí)ES的特性，還要學(xué)習(xí)TypeScript；
?Vue3馬上也會(huì)到來，又必須學(xué)習(xí)Vue3新特性；
大前端開發(fā)就是，不像服務(wù)器一樣可能幾年甚至幾十年還是那一套的東西。前端新技術(shù)會(huì)層出不窮。
image08
但是每一樣技術(shù)的出現(xiàn)都會(huì)讓驚喜，因?yàn)樗厝皇墙鉀Q了之前技術(shù)的某一個(gè)痛點(diǎn)的，而TypeScript真是解決了JavaScript存在的很多設(shè)計(jì)缺陷，尤其是關(guān)于類型檢測的。
并且從開發(fā)者長遠(yuǎn)的角度來看，學(xué)習(xí)TypeScript有助于我們前端程序員培養(yǎng) 類型思維，這種思維方式對(duì)于完成大型項(xiàng)目尤為重要。
我也會(huì)更新一個(gè)TypeScript的系列文章，帶著大家一起來學(xué)習(xí)TypeScript，并且培養(yǎng)大家可以形成類型思維。
3.2. 解除心中的疑惑
回到我們開篇提出的一些疑惑：
TypeScript到底是什么？為什么每個(gè)人都在說TypeScript怎么怎么好，到底好在哪里？Angular、Vue3接連使用TypeScript進(jìn)行了重構(gòu)是否意味著我們必須掌握TypeScript，它們又為什么要選擇TypeScript？我需要什么樣的基礎(chǔ)才能學(xué)會(huì)或者說學(xué)好TypeScript呢？
以上就是我的干貨分享和一些分享計(jì)劃，后面也會(huì)陸續(xù)在平臺(tái)更新，持續(xù)關(guān)注我，帶你一起進(jìn)階打怪！

感覺意猶未盡還想學(xué)的朋友，想獲取更多技能提升秘籍，歡迎加微信：19950277730，我在這里為你隨時(shí)解答。這里有很多如 iOS、數(shù)據(jù)結(jié)構(gòu)與算法等編程技巧的免費(fèi)視頻和學(xué)習(xí)資料。
從下一篇開始，就讓我們把TypeScript環(huán)境搭建好，然后開始正式學(xué)習(xí)它吧！