在過去的幾年里，TypeScript 的流行度一直在增加。它是 2020 年最有前途的五種語(yǔ)言之一。最大的前端框架之一 Angular 正在使用 TypeScript。大約 60% 的 JS 程序員已經(jīng)在使用 TypeScript，22% 的人希望嘗試. 為什么?

從歷史上看，JavaScript 最終成為在 Internet 上編寫網(wǎng)頁(yè)和應(yīng)用程序腳本的主要語(yǔ)言?，F(xiàn)在可以通過Node.js和Deno等框架在前端和后端使用 JavaScript 。

但是 JavaScript 是為了創(chuàng)建像現(xiàn)代網(wǎng)絡(luò)上那樣的大型復(fù)雜系統(tǒng)嗎?不。

在本文中，我們將向您介紹一個(gè)解決方案 – TypeScript – 并讓您開始向 JavaScript 代碼添加類型的道路。

[[417556]]

一、什么是TypeScript?

簡(jiǎn)而言之，TypeScript 是 JavaScript 的超集，它具有可選的類型并編譯為純 JavaScript。

簡(jiǎn)單來(lái)說，從技術(shù)上講，TypeScript是帶有靜態(tài)類型的JavaScript ，只要你想擁有它。

現(xiàn)在，向 JavaScript 添加靜態(tài)類型的原因是什么?

我至少可以列出三個(gè)：

• 您可以避免像經(jīng)典那樣巧妙地隱藏忍者錯(cuò)誤 'undefined' is not a function.
• 在不顯著破壞代碼的情況下重構(gòu)代碼更容易。
• 在復(fù)雜的大型系統(tǒng)中定位自己不再是一場(chǎng)噩夢(mèng)。

實(shí)際上，一項(xiàng)研究表明，TypeScript 可以檢測(cè)到 15% 的 JavaScript 錯(cuò)誤。

動(dòng)態(tài)類型的自由通常會(huì)導(dǎo)致錯(cuò)誤，這些錯(cuò)誤不僅會(huì)降低程序員的工作效率，而且還會(huì)由于添加新代碼行的成本增加而使開發(fā)停止。

因此，JavaScript 未能整合類型和編譯時(shí)錯(cuò)誤檢查等內(nèi)容，這使其成為企業(yè)和大型代碼庫(kù)中的服務(wù)器端代碼的錯(cuò)誤選擇。正如他們的標(biāo)語(yǔ)所說，TypeScript 是可擴(kuò)展的 JavaScript。

1. 我需要學(xué)習(xí)什么才能使用 TypeScript?

TypeScript 本質(zhì)上是一個(gè) JS linter?；蛘?，帶有編譯器可以理解的文檔的 JS。

因此，與 CoffeeScript(添加語(yǔ)法糖)或 PureScript(完全不像 JavaScript)等其他語(yǔ)言相比，您無(wú)需學(xué)習(xí)太多即可開始編寫 TypeScript 代碼。

TS 中的類型是可選的，每個(gè) JS 文件都是一個(gè)有效的 TypeScript 文件。如果您的初始文件中存在類型錯(cuò)誤，編譯器會(huì)抱怨，但它確實(shí)會(huì)返回一個(gè)像以前一樣工作的 JavaScript 文件。無(wú)論身在何處，TypeScript 都會(huì)在那里與您相遇，并且很容易逐步建立您的技能。

2. TypeScript 是用在前端還是后端?

TypeScript 被編譯為 JavaScript。因此，TS 可以用于任何可以使用 JS 的地方：前端和后端。

JavaScript 是為應(yīng)用程序和網(wǎng)頁(yè)的前端實(shí)現(xiàn)腳本編寫的最流行的語(yǔ)言。因此，TypeScript 可用于完全相同的目的，但它在服務(wù)器端的復(fù)雜企業(yè)項(xiàng)目中大放異彩。

在 Serokell，我們的大部分 Web 前端都是用 TypeScript 實(shí)現(xiàn)的。

二、什么是類型，它們?cè)?TS 中如何工作?

1. 類型簡(jiǎn)介

類型是一種在我們運(yùn)行程序之前通過在代碼中描述我們計(jì)劃如何使用我們的數(shù)據(jù)來(lái)區(qū)分正確程序和錯(cuò)誤程序的方法。它們可以從簡(jiǎn)單的類型(如數(shù)字和字符串)到為我們的問題域完美建模的復(fù)雜結(jié)構(gòu)。

編程語(yǔ)言分為兩類：靜態(tài)類型或動(dòng)態(tài)類型。

在具有靜態(tài)類型的語(yǔ)言中，必須在編譯時(shí)知道變量的類型。如果我們聲明一個(gè)變量，編譯器應(yīng)該知道(或可推斷)它是數(shù)字、字符串還是布爾值。想想Java。

在具有動(dòng)態(tài)類型的語(yǔ)言中，情況不一定如此。變量的類型只有在運(yùn)行程序時(shí)才知道。想想Python。

TypeScript 可以支持靜態(tài)類型，而 JavaScript 不支持。

由于 TypeScript 的靜態(tài)類型，您需要更加努力：

• 引入未定義的變量(編譯時(shí)警告幫助)
• 對(duì)兩個(gè)包含數(shù)字的字符串求和(如“4”+“20”=“420”)
• 對(duì)不允許的事情進(jìn)行操作，例如修剪數(shù)字。

使用靜態(tài)類型系統(tǒng)，您可以創(chuàng)建自己的復(fù)合類型。這使工程師能夠更詳細(xì)地表達(dá)他們的意圖。

顯式類型還使您的代碼具有自說明屬性：它們確保您的變量和函數(shù)符合預(yù)期，并使計(jì)算機(jī)能夠記住周圍的上下文。

2. TypeScript的類型

TypeScript 有多種基本類型，如 Boolean、Number、String、Array、Tuple 等。其中一些在 JS 中不存在;你可以在TypeScript 的文檔中了解更多關(guān)于它們的信息。

除此之外，這里還有一些我們想要展示的其他類型來(lái)展示 TS 的表現(xiàn)力：

(1) Any & Unknown

雖然 any 作為類型可以覆蓋，好吧，你想要的任何東西，但未知的是它的類型安全對(duì)應(yīng)物。

每當(dāng)您想轉(zhuǎn)義類型系統(tǒng)時(shí)， any 都可以讓您將任何 JavaScript 變量分配給它。它經(jīng)常用于對(duì)尚未檢查且類型未知的傳入變量(例如來(lái)自第三方 API)進(jìn)行建模。

Unknown 與 any 非常相似，但它不會(huì)讓您在對(duì)變量進(jìn)行顯式類型檢查之前對(duì)其執(zhí)行任何操作。

(2) Void

當(dāng)沒有返回值時(shí)使用 void，例如，作為不返回任何值的函數(shù)的返回類型。

(3) Never

Never 是不應(yīng)該發(fā)生的事情的返回類型，比如會(huì)拋出異常的函數(shù)。

(4) 交集和聯(lián)合類型

這些使您能夠創(chuàng)建自定義類型以更好地適應(yīng)您的邏輯。

交集類型使您可以將幾種基本類型組合在一種類型中。例如，您可以創(chuàng)建一個(gè)具有 name: string和自定義類型 Person phone_number: number。這相當(dāng)于說：我希望我的類型是這個(gè)和那個(gè)。

聯(lián)合類型使您的類型能夠采用多種基本類型之一。例如，您可以有一個(gè)返回result: string或undefined的查詢。這相當(dāng)于說：我希望我的類型是這樣或那樣。

如果您將類型視為空格，那么所有這些類型很快就會(huì)變得有意義。

TypeScript 中的類型可以是隱式的也可以是顯式的。如果您沒有明確地編寫您的類型，編譯器將使用類型推斷來(lái)推斷您正在使用的類型。

然而，明確地編寫它們會(huì)帶來(lái)一些好處，例如幫助其他開發(fā)人員閱讀您的代碼并確保您看到的就是編譯器看到的。

三、TypeScript 與 JavaScript

務(wù)實(shí)是值得的。看看這張圖：

TypeScript 現(xiàn)在在 2020 年第一季度的 GitHub 拉取請(qǐng)求中排在第 7 位，高于 PHP 和 C。

雖然造成這種情況的一個(gè)重要原因是微軟(創(chuàng)建它)和谷歌等公司對(duì) TypeScript 的支持，但它的支持是有充分理由的。

1. 選擇 TypeScript 而不是 JavaScript 的 3 個(gè)理由

(1) TypeScript 更可靠

與 JavaScript 相比，TypeScript 代碼更可靠且更易于重構(gòu)。這使開發(fā)人員能夠避免錯(cuò)誤并更容易地進(jìn)行重寫。

類型使大多數(shù)可以潛入 JavaScript 代碼庫(kù)的愚蠢錯(cuò)誤無(wú)效，并創(chuàng)建一個(gè)快速反饋循環(huán)來(lái)修復(fù)編寫新代碼和重構(gòu)時(shí)的所有小錯(cuò)誤。

(2) TypeScript 更明確

明確類型將我們的注意力集中在我們的系統(tǒng)是如何構(gòu)建的，以及它的不同部分如何相互交互。在大型系統(tǒng)中，重要的是能夠抽象出系統(tǒng)的其余部分，同時(shí)牢記上下文。類型使我們能夠做到這一點(diǎn)。

(3) TypeScript 和 JavaScript 實(shí)際上是可以互換的，為什么不呢?

由于 JavaScript 是 TypeScript 的一個(gè)子集，因此您可以在 TypeScript 代碼中使用所需的所有 JavaScript 庫(kù)和代碼。

大多數(shù)流行的 JavaScript 庫(kù)在 2020 年都有類型——絕對(duì)類型是一個(gè)存儲(chǔ)庫(kù)，其中包含許多不同 JavaScript 庫(kù)的類型，您可以使用它們來(lái)使與它們的交互更加類型安全。

這意味著你可以逐漸在你的 JavaScript 代碼庫(kù)中采用 TypeScript，首先將類型添加到單個(gè)模塊，然后擴(kuò)展到……我猜是使用已知的宇宙。

2. TypeScript 的缺點(diǎn)

你不能只是讓一個(gè) JavaScript 團(tuán)隊(duì)或一個(gè) JavaScript 存儲(chǔ)庫(kù)立即將它們切換到慣用的 TypeScript。有一些權(quán)衡，你必須做出前期的時(shí)間犧牲。

雖然我們可以爭(zhēng)論從長(zhǎng)遠(yuǎn)來(lái)看明確類型會(huì)給你帶來(lái)的節(jié)省，但從短期來(lái)看，添加它們確實(shí)需要更多時(shí)間。這可以說不是什么大問題，但它是支持 JavaScript 的一個(gè)論據(jù)。

因此，您可能不會(huì)為小型項(xiàng)目和自己使用的原型選擇 TypeScript。

3. 測(cè)試與類型

簡(jiǎn)要談?wù)劀y(cè)試與類型的討論：這兩件事都捕獲不同類別的錯(cuò)誤，因此以無(wú)黨派的方式進(jìn)行這兩項(xiàng)工作是有意義的。

您仍然可以同時(shí)使用單元測(cè)試和更高級(jí)的技術(shù)，例如使用 TS進(jìn)行基于屬性的測(cè)試，同時(shí)保持靜態(tài)類型系統(tǒng)的優(yōu)勢(shì)。

總而言之，這是兩種語(yǔ)言的快速比較：

4. TypeScript 快速入門指南

(1) TypeScript編譯器

要編譯您的 TS 代碼，您需要安裝tsc(TypeScript 編譯器的縮寫)。最簡(jiǎn)單的方法是通過終端。這可以npm通過使用以下命令輕松完成：

npm install -g typescript 

如果你想在 Visual Studio Code 中使用 TypeScript，他們的網(wǎng)站上有一個(gè)方便的指南。

安裝后tsc，您可以使用tsc filename.ts.

(2) 將文件從 JavaScript 遷移到 TypeScript

假設(shè)由于奇怪的行為，我們想將以下 JavaScript 文件更改為 TypeScript：

function my_sum(a, b) { 
    return a + b; 
    } 
 
let a = 4;  
let b = "5"; 
 
 
my_sum(a, b); 

好消息。任何 JS 文件在技術(shù)上都是有效的 TypeScript 文件，所以你有一個(gè)很好的開始——只需將文件擴(kuò)展名從 .js 切換到 .ts。

TypeScript 具有類型推斷功能，這意味著它可以自動(dòng)推斷您使用的某些類型，而無(wú)需您添加它們。在這種情況下，它假定函數(shù)對(duì)兩個(gè) any 類型的變量求和，這是正確的，但現(xiàn)在沒有多大用處。

如果我們只想對(duì)數(shù)字求和，我們可以添加一個(gè)類型簽名my_sum以使其只接受數(shù)字。

function my_sum(a: number, b: number) { 
    return a + b; 
} 
 
let a = 4;  
let b = "5"; 
 
my_sum(a, b); 

現(xiàn)在，TypeScript 為我們提供了一個(gè)錯(cuò)誤。

Argument of type 'string' is not assignable to parameter of type 'number'. 

好在我們找到了錯(cuò)誤所在。:) 要進(jìn)一步避免此類錯(cuò)誤，您還可以向變量添加類型定義。

let b: number = "5" // Type '"5"' is not assignable to type 'number'. 
let b: number = 5 // Everything ok.  

TypeScript 在它可以做什么以及如何幫助你方面非常靈活。有關(guān)如何將現(xiàn)有 JavaScript 代碼庫(kù)移至 TypeScript 或使用 TypeScript 改進(jìn) JS 代碼的不太簡(jiǎn)單的示例，請(qǐng)閱讀本指南。

四、如何在瀏覽器中使用 TypeScript?

要在瀏覽器中運(yùn)行 TypeScript，需要使用 TypeScript 編譯器 (tsc) 將其轉(zhuǎn)換為 JavaScript。在這種情況下，tsc基于 .ts 代碼創(chuàng)建一個(gè)新的 .js 文件，您可以使用任何可以使用 JavaScript 文件的方式。

結(jié)論

總的來(lái)說，TypeScript 是您工具集中的一個(gè)很好的工具，即使您沒有充分利用它。很容易從小處開始，慢慢成長(zhǎng)，隨時(shí)學(xué)習(xí)和添加新功能。TypeScript 實(shí)用且歡迎初學(xué)者，因此無(wú)需害怕。

本文由聞數(shù)起舞翻譯自Gints Dreimanis, Olga Bolgurtseva的文章《Why You Should Choose TypeScript Over JavaScript》，轉(zhuǎn)載請(qǐng)注明出處，原文鏈接：

https://serokell.io/blog/why-typescript)