摘要：弄了一個(gè)持續(xù)更新的筆記，可以去看看，鏈接地址此篇文章的地址使用兩年后值得嗎基礎(chǔ)筆記的地址可以也可以。使用，你可以使用抽象類(lèi)等功能。有關(guān)抽象類(lèi)的更多信息支持，和方法，只讀屬性。

弄了一個(gè)持續(xù)更新的github筆記，可以去看看，鏈接地址：Front-End-Basics

此篇文章的地址：使用TypeScript兩年后-值得嗎？

基礎(chǔ)筆記的github地址：https://github.com/qiqihaobenben/Front-End-Basics ,可以watch,也可以star。

這是我的第一篇翻譯文章，想看這篇文章的時(shí)候，發(fā)現(xiàn)沒(méi)有中文翻譯版，無(wú)奈去讀了英文版，讀完發(fā)現(xiàn)可以試試翻譯出來(lái)。

本人英語(yǔ)水平不是一般的差，之前很排斥讀英文資料，現(xiàn)在努力轉(zhuǎn)變觀念，慢慢的開(kāi)始不那么害怕讀英文資料了。這篇文章在磕磕絆絆的查單詞中讀了第一遍，然后在不查單詞的情況下順了兩遍，肯定會(huì)有錯(cuò)誤，懇請(qǐng)指正。當(dāng)然你也可以直接讀更準(zhǔn)確的英文原文。

原文地址:https://ecom.software/en/afte...
作者：Kamil Zagrabski

差不多兩年前，我在一個(gè)創(chuàng)業(yè)團(tuán)隊(duì)中開(kāi)始了一個(gè)全新的項(xiàng)目。用到的全都是類(lèi)似Microservices，docker，react，redux這些時(shí)髦的東西。

我在前端技術(shù)方面積累了一些類(lèi)似的經(jīng)驗(yàn)，因?yàn)樵诟绲囊荒昵拔規(guī)е?0多名前端開(kāi)發(fā)人員編寫(xiě)了一個(gè)非常大的react應(yīng)用程序。這對(duì)我來(lái)說(shuō)非常具有挑戰(zhàn)性。當(dāng)時(shí)我們遇到了很多問(wèn)題：模型內(nèi)聚的問(wèn)題，代碼庫(kù)的增長(zhǎng)，復(fù)雜且難以維護(hù)的api，接口不一致，難以跟蹤運(yùn)行時(shí)異常。

在開(kāi)始新項(xiàng)目之前，我決定找到解決這些問(wèn)題的方法。我想也許我們遇到的這些問(wèn)題是因?yàn)檎Z(yǔ)言本身有點(diǎn)過(guò)于靈活和寬泛導(dǎo)致的。你輸入的內(nèi)容幾乎沒(méi)有限制，再加上沒(méi)有編譯階段，沒(méi)有約束和運(yùn)行前代碼驗(yàn)證，這可能導(dǎo)致你的包存在嚴(yán)重錯(cuò)誤。

然后我接觸到了Flowtype和TypeScript。經(jīng)過(guò)短暫的評(píng)估后，我決定選擇TypeScript，并且一直用到現(xiàn)在。在兩年后的今天，我可以告訴你 - 決定使用TypeScript對(duì)項(xiàng)目和我的職業(yè)生涯來(lái)說(shuō)是個(gè)不錯(cuò)的選擇。但是，如果你認(rèn)為T(mén)ypeScript開(kāi)發(fā)人員的生活總是稱(chēng)心如意的，那么你最好繼續(xù)閱讀。

在本文中，我不想詳細(xì)說(shuō)明TypeScripts的功能或深入項(xiàng)目設(shè)置?；ヂ?lián)網(wǎng)上有很多很好的資源（例如官方TS文檔：https://www.typescriptlang.or...）。當(dāng)然，這篇文章也不是初學(xué)者的入門(mén)引導(dǎo)。

這是一個(gè)關(guān)于在使用TypeScript日常工作中感受到的優(yōu)缺點(diǎn)的總結(jié)。我想描述一下我使用TypeScript的最糟糕體驗(yàn)，另一方面，我也要說(shuō)一下我認(rèn)為最有用的功能。所以本文都是關(guān)于利弊好壞的權(quán)衡，讓我們開(kāi)始吧。

正如我所提到的，我對(duì)react和redux有一些經(jīng)驗(yàn)，所以我想利用這些優(yōu)勢(shì)，在新項(xiàng)目中使用類(lèi)似的（自定義）配置。比如 - webpack，babel，npm scripts，jest，linter這些通用的東西，只需要額外做一件小事 - 支持TypeScript。

如果你現(xiàn)在處于同樣的境遇 - 我確切的告訴你：它不僅僅是在webpack配置中加一個(gè)loader。必須為T(mén)S提供一個(gè)聲明，用TSLint替換ESLint，集成TypeScript的loader和babel的配置，將TS插入Jest（測(cè)試平臺(tái)）。

一些操蛋的事情馬上就會(huì)發(fā)生。TS配置并不好搞，“簡(jiǎn)單的復(fù)制并測(cè)試”這種策略并不是上手的最佳方法。

在將tsconfig.json放入項(xiàng)目之前，最好仔細(xì)閱讀文檔。

此外，Jest（轉(zhuǎn)換，模塊映射器）和css模塊存在一些問(wèn)題?？赡苣氵t早會(huì)面對(duì)它們。并且不要認(rèn)為，你現(xiàn)在可以扔掉babel - TypeScript不會(huì)提供任何polyfill來(lái)讓你使用那些牛批閃閃的新語(yǔ)法和功能，也不會(huì)將你的新API轉(zhuǎn)換為舊瀏覽器可以理解的代碼。

所以我的建議是 - 如果可以的話，你應(yīng)該使用一些入門(mén)工具或支持TS開(kāi)箱即用的CLI（比如 angular cli），以避免無(wú)休止的項(xiàng)目配置。

另一個(gè)非常不愉快的經(jīng)歷與TypeScript支持的類(lèi)庫(kù)數(shù)量有關(guān)。

通常，如果你是某個(gè)人npm包的作者，你可以隨時(shí)使用有效的JavaScript包。有時(shí)，您還會(huì)公開(kāi)包的ES6源代碼。如果你準(zhǔn)備將庫(kù)用于TypeScript，你必須提供類(lèi)型定義。簡(jiǎn)單來(lái)說(shuō) - 是一個(gè)具有每個(gè)模塊，命名空間，類(lèi)，方法，函數(shù)等的聲明的文件，TypeScript使用者需要用到這個(gè)。TypeScript模塊只能使用定義中描述的內(nèi)容，并且只能以聲明中指定的方式使用。遺憾的是，通常源代碼和聲明之間沒(méi)有嚴(yán)格的聯(lián)系。并且它們可能還是不正確或過(guò)時(shí)的，或者根本就沒(méi)有。

就個(gè)人而言，我沒(méi)有找不到聲明這樣的問(wèn)題。大多數(shù)流行的庫(kù)都有自己的作者或社區(qū)準(zhǔn)備好的類(lèi)型定義。如果您使用的包沒(méi)有這樣的文件 - 那就換一個(gè)，相同功能的npm包多的是。不過(guò)你可以搞一個(gè)“假的”聲明文件，或創(chuàng)建一個(gè)真實(shí)的聲明文件并發(fā)布出來(lái)，以此為開(kāi)源社區(qū)做出貢獻(xiàn)。

不管怎樣，還有一個(gè)更嚴(yán)重的問(wèn)題 - 正如我之前提到的，一些聲明是不正確的或過(guò)時(shí)的。如果你遇到這樣的問(wèn)題，沒(méi)有簡(jiǎn)單的解決方案。你可以使用聲明能正常工作的之前的版本，自己修復(fù)并貢獻(xiàn)出去或等待作者來(lái)解決。有時(shí)候他們會(huì)及時(shí)修復(fù)，有時(shí)候就沒(méi)那么快了。

順便說(shuō)一句，我是一些簡(jiǎn)單包的作者，相信我，即使想做好，但是我還是常常忘記將新功能與其類(lèi)型定義同步。

現(xiàn)在該輪到高興點(diǎn)的部分了。一旦你配置了項(xiàng)目并選擇了具有良好TS支持的庫(kù)，就可以體會(huì)到類(lèi)型語(yǔ)言的強(qiáng)大了。如果你沒(méi)有這種語(yǔ)言的背景，一開(kāi)始可能有點(diǎn)奇怪。TypeScript中有許多功能在當(dāng)前的JavaScript語(yǔ)法中找不到。讓我們談?wù)勂渲袑?duì)我來(lái)說(shuō)最有用的那些。

如果大家所想，TS最常用的功能是靜態(tài)類(lèi)型。沒(méi)有使用嚴(yán)格類(lèi)型校驗(yàn)也就沒(méi)有使用TypeScript的意義。當(dāng)然你可以使用寬泛的“any”類(lèi)型，這意味著“我不關(guān)心那個(gè)東西的類(lèi)型，它可能是一個(gè)數(shù)字，它可能是一個(gè)字符串?dāng)?shù)組，只管用就行了”，嚴(yán)肅臉，如果你想用這樣方式編碼，那還不如用回舊的JavaScript。

類(lèi)型將幫助你更快，更安全地編碼。你可以告訴編譯器“這個(gè)常量妥妥的是一個(gè)數(shù)字”，如果你嘗試將其用作數(shù)組或字符串，TS編譯器將始終提示你輸入錯(cuò)誤?；旧?，你仍然可以使用你的代碼做任何你想做的事情，就像常規(guī)JavaScript一樣，但現(xiàn)在你的操作比以前更安全，更易理解。

TypeScript中有幾種基本類(lèi)型和一點(diǎn)點(diǎn)跟它們相關(guān)的高級(jí)類(lèi)型和技術(shù)。

下面你可以看到一些基礎(chǔ)的但非常強(qiáng)大的東西，對(duì)于更高級(jí)的類(lèi)型，請(qǐng)?jiān)L問(wèn)文檔：https://www.typescriptlang.or...。

除了眾所周知的類(lèi)型，如數(shù)字或字符串，TypeScript還提供了枚舉類(lèi)型。

您可以使用內(nèi)置類(lèi)型，如Date或Error。嘗試代碼提示，以實(shí)現(xiàn)更快，更安全的編程。

如果你認(rèn)為類(lèi)型是“顛覆者”，那么你對(duì)接口有什么看法？接口可以幫助你編寫(xiě)更好的代碼，因?yàn)樗鼈冏罱K允許你定義對(duì)象之間的約定好的實(shí)現(xiàn)方式。我創(chuàng)建了很多接口。他們無(wú)處不在。有時(shí)我專(zhuān)門(mén)為接口寫(xiě)一個(gè)文件，因?yàn)檫@樣是值得的。

我主要用它來(lái)描述對(duì)象，類(lèi)，函數(shù)和參數(shù)的形狀。你可以在模塊之間共享它們并像處理源代碼中的實(shí)例一樣對(duì)待，不過(guò)要記住 - 運(yùn)行時(shí)接口不會(huì)出現(xiàn)在代碼里，這一點(diǎn)很容易忽略。這就是為什么有些情況下使用類(lèi)而不是接口（如使用Angular Dependency Injection）更好。讓我們看一下接口的一些真實(shí)例子：

在左邊 - 返回類(lèi)型的錯(cuò)誤實(shí)現(xiàn)。在右側(cè) - VS Code 立即通知你代碼中的錯(cuò)誤。

在左側(cè) - 一個(gè)類(lèi)錯(cuò)誤地實(shí)現(xiàn)了用戶擴(kuò)展的接口（參見(jiàn)上一個(gè)屏幕）。在右邊 - 描述錯(cuò)誤信息..

ES6中有類(lèi)，所以你可能之前用過(guò)它。但是在TypeScript類(lèi)中有一些額外的功能，可能EcmaScript的未來(lái)會(huì)實(shí)現(xiàn)這些功能。在TS中，您可以定義抽象類(lèi)，你可以將類(lèi)的屬性描述為靜態(tài)，私有或只讀，您可以擴(kuò)展類(lèi)并使類(lèi)實(shí)現(xiàn)接口（沒(méi)毛病）。我不會(huì)比較TS類(lèi)和ES6類(lèi)之間的差異，因?yàn)樽罱K它們都會(huì)產(chǎn)生類(lèi)似的JavaScript代碼（在編譯和轉(zhuǎn)換之后）。在TS類(lèi)中，只是用優(yōu)雅而有效的方式封裝要使用的類(lèi)，它們與其他語(yǔ)言實(shí)現(xiàn)（如Java）非常相似，這會(huì)產(chǎn)生一些影響（更多關(guān)于“代碼審查”部分的內(nèi)容）?？匆幌吕泳湍苤涝趺从肨ypeScript和優(yōu)秀的代碼編輯器配合來(lái)讓你的工作更容易。

當(dāng)然，TypeScript中還有很多新東西，比如泛型（你會(huì)使用它們），枚舉（對(duì)于內(nèi)部事物可能會(huì)用到），命名空間，JSX支持等等。但你一開(kāi)始不需要知道的面面俱到，只需使用上面提到的基本功能，你將看到，你的代碼質(zhì)量得到了提高。

使用TypeScript，你可以使用抽象類(lèi)等功能。有關(guān)抽象類(lèi)的更多信息：https://www.typescriptlang.or...

TypeScript支持private，public和protected方法，只讀屬性。類(lèi)可以實(shí)現(xiàn)接口或擴(kuò)展其他類(lèi)。

我剛才提到代碼質(zhì)量了嗎？當(dāng)然提到了，因?yàn)槲覀兌缄P(guān)心代碼質(zhì)量（除此之外還有客戶需求，截止日期和排期，以及...）。

那么為什么應(yīng)該使用TypeScript呢？（在代碼質(zhì)量這個(gè)層面）

代碼中沒(méi)有與參數(shù)或變量名的拼寫(xiě)錯(cuò)誤相關(guān)的一些非常煩人的運(yùn)行時(shí)錯(cuò)誤

您可以建立清晰明了的對(duì)象之間的約定

不用hack的手段就能實(shí)現(xiàn)類(lèi)似在class中使用private的事情

有來(lái)自編譯器的即時(shí)反饋，很多錯(cuò)誤都是在編譯階段捕獲的，而不是在運(yùn)行時(shí)

讓非JS開(kāi)發(fā)人員更容易閱讀和理解代碼

你可以使用JavaScript未來(lái)版本中的功能

為單元測(cè)試編寫(xiě)mocks，stubs和fakes要容易得多，因?yàn)槟阒浪麄兊拇_切接口。

此外，由于出色的IDE支持，編寫(xiě)可維護(hù)代碼要容易得多。老實(shí)說(shuō) - 即使你多帶帶寫(xiě)一個(gè)不大的應(yīng)用程序，幾周后你也會(huì)忘了你必須傳給服務(wù)的參數(shù)類(lèi)型或新創(chuàng)建用戶包含什么樣的數(shù)據(jù)。你當(dāng)然可以翻源碼，過(guò)一遍代碼然后找到有用的信息（假設(shè)你的代碼總是簡(jiǎn)潔的），但在你喜歡的編輯器中將鼠標(biāo)hover到函數(shù)名上就能看到你要的信息豈不更好？例如，它接受“age”，這是一個(gè)“number”，并返回具有“age”和“name”屬性的用戶實(shí)例。

代碼審查是我想提到的另一件事。當(dāng)你在小團(tuán)隊(duì)中工作時(shí)，有時(shí)候你是唯一的前端開(kāi)發(fā)人員，在做.net或Java的同事真的不喜歡看原生的JavaScript。由于語(yǔ)言的動(dòng)態(tài)和簡(jiǎn)潔性，他們會(huì)覺(jué)得可讀性很差，沒(méi)有類(lèi)型意味著沒(méi)有提示。例如 - 名稱(chēng)為“user”的對(duì)象具有“ID”屬性，但I(xiàn)D是數(shù)字還是字符串？如果是一個(gè)字符串，為什么你只需要調(diào)用“toString（）”就可以了？如果是一個(gè)數(shù)字，為什么你剛剛在它前面添加字符串“id_”呢？TypeScript代碼看起來(lái)很像其他流行的類(lèi)型語(yǔ)言，并且你有可能將獲得更好，更準(zhǔn)確的代碼審查。更好的代碼審查意味著更好的代碼，這個(gè)不需要我再多說(shuō)了吧。

左側(cè) - TypeScript中的代碼。右邊 - Java中的代碼。如您所見(jiàn)，語(yǔ)法非常相似，這意味著比起原生的JavaScript,Java開(kāi)發(fā)人員應(yīng)該更容易理解你的TypeScript代碼。

最后關(guān)于TypeScript我還要多說(shuō)一點(diǎn)。與往常一樣，當(dāng)你嘗試新事物時(shí)，會(huì)有一些學(xué)習(xí)曲線。放到TS下看，它不是非常陡峭，但是要避免TypeScript和新框架一起用，這兩樣加起來(lái)就會(huì)讓學(xué)習(xí)曲線變得足夠陡峭。特別是在大型或缺乏經(jīng)驗(yàn)的團(tuán)隊(duì)中。這就是為什么我兩年前選擇了這個(gè)項(xiàng)目作為我的第一個(gè)TypeScript應(yīng)用 - 我對(duì)react那套技術(shù)棧非常熟悉，所以這是一個(gè)學(xué)習(xí)一種有前途的新語(yǔ)言很好的機(jī)會(huì)。我敢保證，如果我同時(shí)選擇了一個(gè)新框架（比如說(shuō)Angular）和一種新語(yǔ)言，我會(huì)被按在地上摩擦。

我會(huì)向你推薦TypeScript嗎？當(dāng)然會(huì)。它將幫助你在更短的時(shí)間內(nèi)寫(xiě)出更好的代碼。IDE支持現(xiàn)在非常棒，社區(qū)充滿活力，具有TS定義的庫(kù)的數(shù)量很龐大而且還在不斷增長(zhǎng)，用過(guò)的程序員都說(shuō)好（來(lái)自編譯器的快速反饋）。這是我所知道的用于創(chuàng)建現(xiàn)代和可擴(kuò)展的Web應(yīng)用程序（當(dāng)然還有Node.js服務(wù)）的最佳工具。請(qǐng)記住上面提到的一些缺點(diǎn)，解決了它們就能深入探索靜態(tài)類(lèi)型語(yǔ)言的多彩世界了。