TypeScript編譯工作原理？

近年來，流行的程式語言TypeScript已被廣大開發者廣泛採用。它是JavaScript的超集，透過靜態型別和其他特性增強了語言功能，使複雜應用程式的開發更簡單，更不容易出錯。但是，TypeScript程式碼必須編譯成JavaScript，因為它不能直接在瀏覽器或伺服器上執行。任何使用TypeScript的開發者都必須理解TypeScript編譯的工作原理。

TypeScript編譯過程包含多個步驟，包括解析、型別檢查、輸出JavaScript、捆綁和執行。在解析階段，TypeScript編譯器會解析程式碼並建立一個程式碼的抽象語法樹模型。在型別檢查階段，會檢查程式碼以確定變數、函式和表示式的型別，並查詢型別錯誤。然後，編譯器將TypeScript程式碼轉換成JavaScript程式碼，可以使用Webpack或Rollup之類的程式進行打包。最後，就像其他JavaScript程式碼一樣，包中的程式碼在瀏覽器或伺服器上執行。

使用者可以透過多種方法編譯TypeScript程式碼，例如使用TypeScript編譯器命令列介面(CLI)、構建工具或支援TypeScript的程式碼編輯器。理解TypeScript編譯的工作原理是理解這門語言的關鍵部分。由於其強大的功能和簡易性，開發人員在建立複雜應用程式時經常選擇TypeScript。

TypeScript編譯步驟

TypeScript是JavaScript的超集，它為該語言添加了靜態型別等功能。為了在瀏覽器或伺服器上執行，TypeScript程式碼必須轉換為JavaScript。

TypeScript編譯過程如下：

  • 解析 - TypeScript編譯器解析程式碼，並建立一個其抽象語法樹(AST)模型。

  • 型別檢查 - 編譯器檢查程式碼以確定變數、函式和表示式的型別。此外，它還會查詢型別錯誤，例如將文字賦給持有數字的變數。

  • 生成JavaScript - 型別檢查TypeScript程式碼後，編譯器會生成JavaScript程式碼。生成的JavaScript程式碼中已刪除型別註釋，其他TypeScript特定功能已轉換為JavaScript等效項。生成的JavaScript程式碼等效於原始TypeScript程式碼。

  • 捆綁 - 為減少HTTP請求併為生成的JavaScript程式碼做好生產準備，可以使用Webpack或Rollup之類的程式打包程式碼。

  • 執行 - 然後，打包後的JavaScript程式碼像任何其他JavaScript程式碼一樣在瀏覽器或伺服器上執行。

編譯TypeScript的兩種方法是使用TypeScript編譯器命令列介面(CLI)和具有整合TypeScript支援的構建工具。

示例

在這個例子中，我們將使用TypeScript來乘以兩個數字。我們首先建立typescript檔案並宣告帶有各自型別的變數，然後宣告一個函式，該函式將乘以兩個數字並在控制檯中給出答案。然後編譯typescript程式碼，我們將獲得可以在瀏覽器中輕鬆執行的javascript程式碼。

let number1: number = 10
let number2: number = 20

function multiply(num1: number, num2: number) {
   let ans: number = num1 * num2
   return ans
}

let answer = multiply(number1, number2)
console.log(answer)

編譯後，它將生成以下JavaScript程式碼：

var number1 = 10;
var number2 = 20;
function multiply(num1, num2) {
   var ans = num1 * num2;
   return ans;
}
var answer = multiply(number1, number2);
console.log(answer);

示例2

在這個例子中，我們將使用TypeScript並將其編譯成JavaScript程式碼。我們正在獲取一個物件陣列，迴圈遍歷它們，並逐個列印每個值。首先，我們宣告變數及其型別。然後，我們宣告一個for迴圈，並透過陣列迴圈並控制檯記錄陣列的每個專案。

let arr: { name: String; email: String }[] = [
   {
      name: 'ABC',
      email: 'abc@abc.com',
   },{
      name: 'XYZ',
      email: 'xyz@xyz.com',
   },{
      name: 'MNO',
      email: 'mno@mno.com',
   },{
      name: 'PQR',
      email: 'pqr@pqr.com',
   },
]

for (let i = 0; i < arr.length; i++) {
   console.log('Name: ' + arr[i].name + ' Email: ' + arr[i].email)
}

編譯後，它將生成以下JavaScript程式碼：

var arr = [
   {
      name: 'ABC',
      email: 'abc@abc.com'
   },{
      name: 'XYZ',
      email: 'xyz@xyz.com'
   },{
      name: 'MNO',
      email: 'mno@mno.com'
   },{
      name: 'PQR',
      email: 'pqr@pqr.com'
   },
];
for (var i = 0; i < arr.length; i++) {
   console.log('Name: ' + arr[i].name + ' Email: ' + arr[i].email);
}

更新於：2023年4月6日

2K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告