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

從歷史上看，JavaScript 最終成為在 Internet 上編寫網頁和應用程序腳本的主要語言。現在可以通過Node.js和Deno等框架在前端和后端使用 JavaScript 。

但是 JavaScript 是為了創建像現代網絡上那樣的大型復雜系統嗎?不。

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

[[417556]]

一、什么是TypeScript?

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

簡單來說，從技術上講，TypeScript是帶有靜態類型的JavaScript ，只要你想擁有它。

現在，向 JavaScript 添加靜態類型的原因是什么?

我至少可以列出三個：

• 您可以避免像經典那樣巧妙地隱藏忍者錯誤 'undefined' is not a function.
• 在不顯著破壞代碼的情況下重構代碼更容易。
• 在復雜的大型系統中定位自己不再是一場噩夢。

實際上，一項研究表明，TypeScript 可以檢測到 15% 的 JavaScript 錯誤。

動態類型的自由通常會導致錯誤，這些錯誤不僅會降低程序員的工作效率，而且還會由于添加新代碼行的成本增加而使開發停止。

因此，JavaScript 未能整合類型和編譯時錯誤檢查等內容，這使其成為企業和大型代碼庫中的服務器端代碼的錯誤選擇。正如他們的標語所說，TypeScript 是可擴展的 JavaScript。

1. 我需要學習什么才能使用 TypeScript?

TypeScript 本質上是一個 JS linter。或者，帶有編譯器可以理解的文檔的 JS。

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

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

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

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

JavaScript 是為應用程序和網頁的前端實現腳本編寫的最流行的語言。因此，TypeScript 可用于完全相同的目的，但它在服務器端的復雜企業項目中大放異彩。

在 Serokell，我們的大部分 Web 前端都是用 TypeScript 實現的。

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

1. 類型簡介

類型是一種在我們運行程序之前通過在代碼中描述我們計劃如何使用我們的數據來區分正確程序和錯誤程序的方法。它們可以從簡單的類型(如數字和字符串)到為我們的問題域完美建模的復雜結構。

編程語言分為兩類：靜態類型或動態類型。

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

在具有動態類型的語言中，情況不一定如此。變量的類型只有在運行程序時才知道。想想Python。

TypeScript 可以支持靜態類型，而 JavaScript 不支持。

由于 TypeScript 的靜態類型，您需要更加努力：

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

使用靜態類型系統，您可以創建自己的復合類型。這使工程師能夠更詳細地表達他們的意圖。

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

2. TypeScript的類型

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

除此之外，這里還有一些我們想要展示的其他類型來展示 TS 的表現力：

(1) Any & Unknown

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

每當您想轉義類型系統時， any 都可以讓您將任何 JavaScript 變量分配給它。它經常用于對尚未檢查且類型未知的傳入變量(例如來自第三方 API)進行建模。

Unknown 與 any 非常相似，但它不會讓您在對變量進行顯式類型檢查之前對其執行任何操作。

(2) Void

當沒有返回值時使用 void，例如，作為不返回任何值的函數的返回類型。

(3) Never

Never 是不應該發生的事情的返回類型，比如會拋出異常的函數。

(4) 交集和聯合類型

這些使您能夠創建自定義類型以更好地適應您的邏輯。

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

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

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

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

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

三、TypeScript 與 JavaScript

務實是值得的。看看這張圖：

TypeScript 現在在 2020 年第一季度的 GitHub 拉取請求中排在第 7 位，高于 PHP 和 C。

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

1. 選擇 TypeScript 而不是 JavaScript 的 3 個理由

(1) TypeScript 更可靠

與 JavaScript 相比，TypeScript 代碼更可靠且更易于重構。這使開發人員能夠避免錯誤并更容易地進行重寫。

類型使大多數可以潛入 JavaScript 代碼庫的愚蠢錯誤無效，并創建一個快速反饋循環來修復編寫新代碼和重構時的所有小錯誤。

(2) TypeScript 更明確

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

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

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

大多數流行的 JavaScript 庫在 2020 年都有類型——絕對類型是一個存儲庫，其中包含許多不同 JavaScript 庫的類型，您可以使用它們來使與它們的交互更加類型安全。

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

2. TypeScript 的缺點

你不能只是讓一個 JavaScript 團隊或一個 JavaScript 存儲庫立即將它們切換到慣用的 TypeScript。有一些權衡，你必須做出前期的時間犧牲。

雖然我們可以爭論從長遠來看明確類型會給你帶來的節省，但從短期來看，添加它們確實需要更多時間。這可以說不是什么大問題，但它是支持 JavaScript 的一個論據。

因此，您可能不會為小型項目和自己使用的原型選擇 TypeScript。

3. 測試與類型

簡要談談測試與類型的討論：這兩件事都捕獲不同類別的錯誤，因此以無黨派的方式進行這兩項工作是有意義的。

您仍然可以同時使用單元測試和更高級的技術，例如使用 TS進行基于屬性的測試，同時保持靜態類型系統的優勢。

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

4. TypeScript 快速入門指南

(1) TypeScript編譯器

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

npm install -g typescript 

如果你想在 Visual Studio Code 中使用 TypeScript，他們的網站上有一個方便的指南。

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

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

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

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

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

TypeScript 具有類型推斷功能，這意味著它可以自動推斷您使用的某些類型，而無需您添加它們。在這種情況下，它假定函數對兩個 any 類型的變量求和，這是正確的，但現在沒有多大用處。

如果我們只想對數字求和，我們可以添加一個類型簽名my_sum以使其只接受數字。

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

現在，TypeScript 為我們提供了一個錯誤。

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

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

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

TypeScript 在它可以做什么以及如何幫助你方面非常靈活。有關如何將現有 JavaScript 代碼庫移至 TypeScript 或使用 TypeScript 改進 JS 代碼的不太簡單的示例，請閱讀本指南。

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

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

結論

總的來說，TypeScript 是您工具集中的一個很好的工具，即使您沒有充分利用它。很容易從小處開始，慢慢成長，隨時學習和添加新功能。TypeScript 實用且歡迎初學者，因此無需害怕。

本文由聞數起舞翻譯自Gints Dreimanis, Olga Bolgurtseva的文章《Why You Should Choose TypeScript Over JavaScript》，轉載請注明出處，原文鏈接：

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