如何將JavaScript程序移植到TypeScript?
譯文譯者 | 布加迪
審校 | 重樓
JavaScript最初于1995年發布,經歷短短的發展階段后,已成為許多網站和應用程序不可或缺的一部分。如今,JavaScript在客戶端應用程序和服務器端應用程序中都占有一席之地。盡管這些年來JavaScript發生了許多變化,但開發人員仍然需要眾多特性。
TypeScript是一種擴展JavaScript的腳本語言,提供了許多期待已久的特性。類型注釋、自定義類型和接口都是主要組件,還有提高生產力的更好工具。
為什么要轉換?
面對重大項目,轉換語言可能會帶來壓力。對考慮這項任務的任何人來說值得慶幸的是,將一個項目從JavaScript移植到TypeScript的過程卻很簡單。
作為一種主要的編程語言,JavaScript在過去幾年越來越受歡迎。最初只用于網站的前端腳本,但Node.js的發布將JavaScript引入到服務器端,幫助提升了人氣。
雖然JavaScript最近變得越來越流行,但最新發現:ES6依然缺少很多特性。對于許多開發人員來說,這些缺失的特性限制了JavaScript這種語言的有用性。
TypeScript旨在糾正這些問題,為此用額外的特性包裝JavaScript,然后轉譯用戶代碼。一種具有JavaScript易用性和可用性的類型安全語言由此誕生。
目前已經有幾個工具和框架對TypeScript提供全面支持。長期以來,Angular一直使用TypeScript,連React也有實現TypeScript的方法。
TypeScript就像JavaScript增強版
TypeScript實現了開發人員經常對JavaScript請求的許多特性。TypeScript以它實現的完整類型系統命名,包括類型檢查、安全性和隱式類型等特性。TypeScript甚至允許您定義和使用自定義命名空間。
TypeScript還包含接口、枚舉和類型推斷。TypeScript保留了對來自最新JavaScript實現的特性以及舊特性的支持,還添加了一套新特性。
總的來說,TypeScript致力于創建一個更安全的開發過程,輔以更強大的工具以幫助碼農。
它鼓勵使用類型安全的代碼
TypeScript使用內置的類型檢查系統來驗證變量類型。它包括一組標準類型,可以選擇定義自己的類和類型。它可以顯式聲明類型,也可以根據賦值推斷類型。
TypeScript有幾種標準的數據類型,包括字符串、數字、布爾值和元組。還有變量類型,比如unknown和any,它們允許您使用弱類型代碼。
TypeScript的類型推斷允許您通過讓TypeScript的轉譯器處理標準的JavaScript代碼,對這類代碼甚至執行類型檢查。
轉譯使它易于使用
從開發人員的角度來看,TypeScript最好的特性之一就是它輸出的是常規的JavaScript。您可以通過名為轉譯的過程來運行TypeScript代碼,這個過程類似編譯。
轉譯的結果不是可執行文件,而是使用代碼原始語言以外的語言編寫的腳本。
TypeScript代碼被轉譯成JavaScript,然后您可以在服務器或客戶端上運行。這使您可以快速輕松地編寫幾乎可以在任何平臺上運行的代碼。
TypeScript幫助開發人員提高生產力
為JavaScript添加類型不僅允許代碼安全運行,還為開發人員提供了簡化編碼的工具。大多數現代IDE都提供TypeScript支持,允許像IntelliSense這樣的代碼補全工具為代碼提供額外上下文。它還可以在您編碼時提供類型檢查功能,幫助您更迅速地揪出錯誤。
此外,TypeScript額外的數據結構和語法旨在提高代碼的可讀性。這些特性使用戶更快速更輕松地創建高質量代碼,并及早發現潛在問題。
如何移植代碼?
如果您在開始著手全新的項目,創建新的TypeScript項目相當簡單。然而,將一個已有的項目轉換成TypeScript就有點復雜了。
在大多數正常情況下,將一個項目從一種語言轉換成另一種語言可能令人望而生畏。然而,由JavaScript轉換成TypeScript異常簡單。
TypeScript作為JavaScript的超集
TypeScript被認為是JavaScript的超集。這意味著TypeScript添加了額外的語法和功能,并沒有改變或刪除其底層的核心功能。
對于開發人員來說,這意味著任何在JavaScript中正常運行的代碼都會自動在TypeScript中正確運行。不管這個腳本是用NodeJS編寫的Web服務器,還是一組用于網頁的前端腳本,轉換過程都非常簡單。
在安裝TypeScript轉譯器之后,您可以創建一個簡單的tsconfig.json文件,內容如下:
{
"compilerOptions": {
"outDir": "./build",
"allowJs": true,
"target": "es5"
},
"include": ["./src/**/*"]
}
將所有適用的文件移到src目錄并運行轉譯器。這將在build目錄中創建并生成JavaScript文件。
這些快速而簡單的改變可將標準的JavaScript項目轉換成TypeScript項目。此后,您可以隨意使用TypeScript提供的新特性,可以在變量上標注類型、實現自定義類型和定義接口。
在每次轉譯之后,您可以根據需要使用來自build目錄的輸出,只需將文件添加到任何項目中。轉譯器將對標準JavaScript進行類型檢查,并將新特性轉換成有效的ES5腳本。
從JS轉換成TS,您需要知道什么?
將一個項目從JavaScript轉換成TypeScript的過程非常簡單。轉換就像切換目錄結構、添加配置文件和安裝轉譯器一樣簡單。
然而,從新語言中獲得所有好處可能是更漫長的項目。雖然TypeScript可以推斷出項目中每個變量的類型,但它們應該被顯式聲明。回顧一番,為項目添加自定義類型、添加適當的注釋和創建接口,這可能非常耗時。
然而,把這些特性添加到項目將便于您獲得適當的類型檢查和擴展工具所帶來的好處。大型項目構建起來將更快速更輕松,您可以更早識別錯誤,而新開發人員將更容易閱讀您的代碼。
原文標題:How to Port Your JavaScript Program to TypeScript,作者:Seth M. Thomas