譯者 | 李睿

審校 | 重樓

隨著越來越多的開發(fā)人員采用TypeScript，人們需要了解在下一個項目中應(yīng)該使用TypeScript的原因。盡管它在早期應(yīng)用中遇到了一些阻力，但在過去十年，它迅速成為一種廣泛使用的編程語言。

以下介紹如何使用TypeScript以及它給開發(fā)人員帶來的一些好處。但首先需要深入了解TypeScript是什么以及它可以解決的問題。

什么是TypeScript?

TypeScript是微軟公司在2012年開發(fā)的一種開源編程語言，是JavaScript的一個超集。這意味著它包含所有的JavaScript，但有更多的功能。

它以JavaScript的功能和結(jié)構(gòu)為基礎(chǔ)，具有其他功能，例如類型或面向?qū)ο缶幊?，并且可以編譯為普通JavaScript。因此，任何代碼在JavaScript中都是有價值的。

現(xiàn)在，這一切對開發(fā)的項目意味著什么?

TypeScript能解決什么問題?

TypeScript的主要目的是在開發(fā)復(fù)雜應(yīng)用程序時提高生產(chǎn)力。實現(xiàn)這種情況的一種方法是使集成開發(fā)環(huán)境（IDE）具有更豐富的環(huán)境，以便在鍵入代碼時發(fā)現(xiàn)常見錯誤（bug）。

這為開發(fā)人員開發(fā)的項目增加了安全性。無論開發(fā)人員何時進行更改，都不再需要檢查bug。

由于TypeScript在技術(shù)上涉及到在JavaScript中添加靜態(tài)類型，它可以幫助開發(fā)人員避免像這樣經(jīng)典的錯誤：

當(dāng)它為開發(fā)人員捕獲錯誤時，這使得代碼重構(gòu)更容易，而不會嚴(yán)重破壞它。它具有接口、抽象類、類型別名、元組、函數(shù)重載和泛型等功能。

在大型JavaScript項目中采用這種編程語言可以提供更健壯的軟件，并且仍然可以在JavaScript應(yīng)用程序運行的任何地方部署。

為什么TypeScript比JavaScript更好?

TypeScript的座右銘是“可擴展的JavaScript”。這是因為它為JavaScript帶來了未來的發(fā)展。

但它真的像人們說的那么好嗎?以下是TypeScript優(yōu)于JavaScript的幾個方面：

（1）可選靜態(tài)類型

JavaScript是一種動態(tài)類型語言。盡管這有它的好處，但是動態(tài)類型的自由通常會導(dǎo)致bug。這不僅降低了開發(fā)人員的效率，而且由于增加新代碼行的成本而降低了開發(fā)速度。

但是TypeScript的靜態(tài)類型不同于JavaScript的動態(tài)類型。

例如，當(dāng)不確定JavaScript中的類型時，通常會在運行時依賴TypeError來提示變量類型錯誤的原因。

另一方面，TypeScript為JavaScript添加了語法。它的編譯器使用這種語法在可能的代碼錯誤發(fā)生之前識別出來，然后生成瀏覽器可以理解的JavaScript。

一項研究表明，TypeScript可以成功檢測出15%的JavaScript漏洞。

（2）IDE支持

在早期，TypeScript只在微軟的Visual Studio代碼編輯器中得到支持。然而，隨著它越來越受歡迎，越來越多的代碼編輯器和IDE開始原生地或通過插件來支持編程語言。

開發(fā)人員幾乎可以在所有的代碼編輯器上編寫TypeScript代碼。這種廣泛的IDE支持使它更受軟件開發(fā)人員的歡迎。

其他支持它的IDE支持包括Eclipse、Atom、WebStorm和CATS。

（3）面向?qū)ο?/span>

它支持面向?qū)ο蟮木幊谈拍?，例如類、封裝、繼承、抽象和接口。面向?qū)ο缶幊?OOP)范例使創(chuàng)建組織良好、可擴展的代碼變得更加容易，并且隨著項目的規(guī)模和復(fù)雜性的發(fā)展，這種好處變得更加明顯。

（4）可讀性

由于添加了嚴(yán)格類型和元素，使代碼更具表現(xiàn)力，因此將能夠看到編寫代碼的開發(fā)人員的設(shè)計意圖。這對于遠(yuǎn)程團隊來說非常有效，因為自解釋代碼可以彌補團隊之間缺乏直接溝通的不足。

（5）社區(qū)支持

TypeScript很幸運，有一群才華橫溢的開發(fā)人員不懈地努力改進開源語言。這就解釋了它在過去幾年中在開發(fā)人員和軟件開發(fā)團隊中獲得青睞的原因。

大多數(shù)JavaScript應(yīng)用程序包含數(shù)十萬個文件。對單個文件的一個更改可能會影響其他文件的行為。驗證項目中每個元素之間的關(guān)系可能會很快變得非常耗時。作為一種類型檢查語言，它會在開發(fā)過程中自動完成這些工作，并提供即時反饋。

雖然在處理小項目時可能看不到這有多嚴(yán)重，但具有大型代碼庫的復(fù)雜項目可能會因為到處都是bug而變得混亂。

每個開發(fā)人員都希望更高效、更快速，這有助于提高項目的可擴展性。此外，TypeScript的語言特性和引用驗證使其優(yōu)于JavaScript。

最終，TypeScript改善了開發(fā)人員的體驗和代碼的可維護性，因為開發(fā)人員對自己的代碼更有信心。這也將節(jié)省大量的時間，否則他們將花費大量的時間來驗證他們是否不小心破壞了項目。這種編程語言還提供了團隊之間和團隊內(nèi)部更好的協(xié)作。

TypeScript的優(yōu)點

它為開發(fā)人員和軟件開發(fā)團隊提供了顯著的優(yōu)勢。在下一個項目的開發(fā)中，TypeScript有五個主要的優(yōu)勢：

（1）編譯時錯誤

這是使用TypeScript的一個明顯的優(yōu)勢。編譯時錯誤是大多數(shù)開發(fā)人員開始使用它的原因。他們可以使用編譯器在編譯時而不是運行時檢測潛在的錯誤。

JavaScript無法支持類型和編譯時錯誤檢查，這意味著它不適合復(fù)雜和大型代碼庫中的服務(wù)器端代碼。

使用TypeScript的另一個原因是它在開發(fā)過程中檢測編譯錯誤，從而不太可能發(fā)生運行時錯誤。它結(jié)合了靜態(tài)類型，幫助開發(fā)人員在編譯時檢查類型是否正確。

（2）到處運行

TypeScript可以編譯成純JavaScript，這意味著它可以在任何地方運行。事實上，它可以編譯成JavaScript的任何版本，包括最新版本ES2022以及其他版本（例如ES6、ES5和ES3）。開發(fā)人員可以在前端使用React和Angular這樣的框架，或者在后端使用Node.js。

（3）工具優(yōu)先于文檔

如果想要開發(fā)一個長期成功的項目，文檔是必不可少的。但這可能很棘手，因為很容易忽略文檔，很難執(zhí)行，而且如果不再是最新的文檔，就不可能報告。這使得工具優(yōu)先于文檔變得至關(guān)重要。

TypeScript非常重視工具。這不僅僅是輸入代碼時的錯誤和補全。它記錄了函數(shù)期望的參數(shù)、對象的形狀以及可能未定義的變量。它還會通知開發(fā)人員何時需要更新以及更新的具體位置。

如果沒有這種編程語言，開發(fā)人員將不得不浪費大量時間查找對象的形狀，梳理文檔，并希望它們是最新的?；蛘邔⒉坏貌徽{(diào)試代碼，并希望對哪些字段是必需的和可選的預(yù)測是準(zhǔn)確的。

（4）面向?qū)ο缶幊?OOP)

作為一種面向?qū)ο蟮木幊陶Z言，TypeScript非常適合必須主動更新或維護的大型復(fù)雜項目。面向?qū)ο缶幊烫峁┑囊恍┖锰幨牵?/span>

• 通過繼承重用代碼：在對象之間分配關(guān)系和子類的能力使開發(fā)人員能夠在保留唯一層次結(jié)構(gòu)的同時重用公共邏輯。面向?qū)ο缶幊?OOP)的這一屬性加快了開發(fā)速度，并通過支持更深入的數(shù)據(jù)分析提供了更高的準(zhǔn)確性。
• 由于多態(tài)性而增加的靈活性：根據(jù)場景的不同，對象可以根據(jù)場景采取多種形式。該程序?qū)⒆R別每次執(zhí)行該對象所需的含義或用法，這減少了重復(fù)代碼的需要。
• 通過封裝減少數(shù)據(jù)損壞：每個對象的實現(xiàn)和狀態(tài)在定義的類或邊界內(nèi)被私有地保存。其他對象不能訪問該類，也沒有權(quán)限進行更改。它們只能調(diào)用一組方法或公共函數(shù)。因此，封裝可以幫助開發(fā)人員執(zhí)行數(shù)據(jù)隱藏，從而提高程序安全性，并防止意外的數(shù)據(jù)損壞。
• 有效解決問題：面向?qū)ο缶幊虒?fù)雜問題分解為可解決的塊。對于每個小問題，開發(fā)人員編寫一個類來完成他們需要的功能。

最終，使用面向?qū)ο缶幊?OOP)提供了改進的數(shù)據(jù)結(jié)構(gòu)和可靠性，同時從長遠(yuǎn)來看節(jié)省了時間。

（5）靜態(tài)類型

除了幫助開發(fā)人員捕獲bug之外，靜態(tài)類型還為代碼提供了更多的結(jié)構(gòu)，并確保它是自文檔化的代碼。這是因為信息的類型使人們更容易理解類、函數(shù)和其他結(jié)構(gòu)的工作方式。重構(gòu)代碼或消除技術(shù)債務(wù)也變得更加容易。

此外，靜態(tài)類型與自動補全工具無縫集成，確保它們更加可靠和準(zhǔn)確。這樣，開發(fā)人員可以更快地編寫代碼。在大多數(shù)情況下，靜態(tài)類型的代碼對人類或機器人來說更容易閱讀。

逐步安裝TypeScript

到目前為止，已經(jīng)了解了TypeScript的作用，以及它如何使編寫代碼變得更容易。但是如何使用TypeScript?

首先需要安裝它，以下是一個完整的指南。

（1）步驟1：下載并安裝NodeJS框架

第一步是將NodeJS框架（npm版本）下載并安裝到計算機中。如果還沒有安裝，可以訪問Node下載頁面進行安裝。建議使用TS（長期支持）版本，因為它是最穩(wěn)定的。

（2）步驟2：導(dǎo)航到「開始」菜單并單擊命令提示符

在安裝完Node和NPM后，在NodeJS命令提示符下運行如下命令：

npm install -g TypeScript

該命令將把TypeScript安裝到本地系統(tǒng)中。

（3）步驟3：驗證安裝

可以通過運行下面的命令來驗證TypeScript是否已經(jīng)安裝:

tsc – v

tsc是TypeScript編譯器，而-v標(biāo)志顯示的是TS版本。參見以下內(nèi)容：

一旦確認(rèn)了這一點，TypeScript就已經(jīng)成功安裝。也可以使用命令“@”和所需的版本來安裝特定的TS版本。

例如：

npm install –global TypeScript@4.9.3

如何將TypeScript安裝到當(dāng)前項目中

開發(fā)人員也可以根據(jù)每個項目進行設(shè)置。也就是說，將TypeScriptTS版本安裝到當(dāng)前項目中。這有助于開發(fā)人員擁有具有不同TypeScript版本的多個項目，并確保每個項目在沒有交互的情況下一致工作。

要在項目中本地安裝TypeScript編譯器，只需使用以下命令：

npm install -save-dev TypeScript

如何卸載TypeScript

要卸載它，可以使用與安裝時相同的命令。只需將安裝（install）替換為卸載（uninstall），如下所示：

npm uninstall –global TypeScript

如何使用TypeScript

在安裝之后，就可以使用了。需要安裝像Visual code Studio這樣的代碼編輯器。如果沒有安裝，需要下載并安裝VS Code。在完成這一操作之后，以下了解如何使用TypeScript：

• 步驟1：創(chuàng)建一個簡單的Hello World項目。這將幫助了解如何使用TypeScript。
• 步驟2：在安裝完成后，執(zhí)行如下命令制作工程目錄：

mkdir HelloWorld

然后進入新目錄：

cd HelloWorld

• 步驟3：啟動Visual Studio Code(或喜歡的代碼編輯器)。這里將使用VS code。
• 步驟4：導(dǎo)航到文件資源管理器并創(chuàng)建一個名為helloworld.ts的新文件。開發(fā)人員可以自己命名文件名，但是，重要的是要以.ts擴展名為結(jié)尾。

• 步驟5：接下來，添加以下TypeScript代碼。

let message: string = ‘Hello, World!’; console.log(message);

你將會注意到關(guān)鍵字let和字符串類型聲明。

• 步驟6：要編譯TypeScript代碼，只需打開集成終端（Ctrl+`）并鍵入：

tsc helloworld.ts

這將編譯并創(chuàng)建一個新的helloworld.js JavaScript文件。

當(dāng)打開helloworld.js時，就會發(fā)現(xiàn)它看起來和helloworld.ts沒有太大的不同。人們將看到類型信息現(xiàn)在已被刪除，?let’已被?var’取代。

結(jié)語

最終，使用TypeScript取決于開發(fā)的項目以及所需的時間和精力。開發(fā)團隊將需要評估使用TypeScript的優(yōu)點和缺點。因此，從更好的代碼完成到預(yù)防bug，使用TypeScript會讓開發(fā)團隊在編寫代碼時更輕松。

原文標(biāo)題：Why Use TypeScript for Your Projects?，作者：Alfonso Valdes