如何在 OS X 上使用 Visual Studio Code 自動編譯 TypeScript 檔案？

---

TypeScript 是一種流行的程式語言，廣泛應用於 Web 開發領域。它是一種開源的、強型別的、面向物件的程式語言，是 JavaScript 的超集。TypeScript 與 JavaScript 非常相似，但它具有一些額外的功能，使其更加強大和高效。TypeScript 最好的方面之一是它可以編譯成 JavaScript，可以在任何瀏覽器或任何伺服器上執行。

在本文中，我們將討論如何在 OS X 上使用 Visual Studio Code 自動編譯 TypeScript 檔案。Visual Studio Code 是一款流行的程式碼編輯器，被全球許多開發人員使用。它輕量級、快速，並且具有許多使編碼更容易和更高效的功能。

分步指南

在開始之前，請確保您已在系統上安裝了最新版本的 Visual Studio Code 和 TypeScript。

您可以從其官方網站 (https://vscode.com.tw/) 下載 Visual Studio Code。

Visual Studio Code (VS Code) 包含 TypeScript 語言支援，但它不包含 TypeScript 編譯器 tsc。您可以全域性或在工作區中安裝 TypeScript 編譯器，以將 TypeScript 原始碼轉換為 JavaScript。您可以執行以下任何命令將 tsc 安裝到您的系統中。

如果您使用 npm，請執行此命令：

npm install -g typescript

或者，如果您使用 yarn，請執行：

yarn global add typescript

或者，如果您使用 pnpm，請執行：

pnpm install -g typescript

或者，您只需為您的工作區（專案）安裝它，只需從上述命令中刪除 global 或 -g 選項即可。

在開始之前，讓我們首先確保您已在系統上正確安裝了 TypeScript，方法是執行以下命令：

tsc -v

只要您獲得類似以下內容的輸出，您就可以開始這段旅程：

現在您已完成系統設定，讓我們開始學習如何在 OS X 上使用 Visual Studio Code 編譯 TypeScript 檔案。

需要注意的是，VS Code 的 TypeScript 語言服務與您安裝的 TypeScript 編譯器是分開的。當您開啟 TypeScript 檔案時，您可以在狀態列中看到 VS Code 的 TypeScript 版本。

步驟 1：建立 TypeScript 專案

第一步是建立一個 TypeScript 專案。開啟 Visual Studio Code 併為您的專案建立一個名為 typescript-demo 的新目錄。在本教程中，專案名稱並不重要。

接下來，透過按下 Cmd + Shift + P 並輸入“終端：建立新的整合終端”在命令面板中開啟 Visual Studio Code 中的終端。您也可以透過按下 Ctrl + Shift + ` 建立一個新的終端。

現在，在終端中導航到專案資料夾並使用以下命令建立一個新的 TypeScript 檔案：

touch index.ts

步驟 2：建立 Tsconfig.json 檔案

下一步是建立一個 tsconfig.json 檔案。此檔案告訴 TypeScript 編譯器如何編譯您的 TypeScript 檔案。在您的專案目錄中使用以下命令建立一個新檔案：

touch tsconfig.json

接下來，開啟 tsconfig.json 檔案並新增以下程式碼：

{
   "compilerOptions": {
      "target": "es5",
      "out": "js/script.js",
      "watch": true
   }
}

此處，“target” 選項指定輸出 JavaScript 應使用的 ECMAScript 版本。“out” 選項指定轉換後的 JavaScript 程式碼的位置。“watch”: true 選項指示編譯器監視所有已編譯的檔案：

請注意，省略了 files 陣列。因此，預設情況下，所有子目錄中的所有 *.ts 檔案都將被編譯。您可以提供任何其他引數或更改 target/out，只需確保 watch 設定為 true 即可。

您還可以在此檔案中設定許多其他選項，例如 module, esModuleInterop, forceConsistentCasingInFileNames, strict, skipLibCheck，這些選項可以使您作為 TypeScript 開發人員的生活更輕鬆，您可以參考此文件 (https://typescript.lang.tw/tsconfig) 獲取更多資訊。

您也可以使用以下命令建立一個預設的 tsconfig.json：

tsc --init

這將建立一個帶有預設引數值的 tsconfig.json。它看起來像這樣：

步驟 3：配置 Visual Studio Code 以編譯 TypeScript 檔案

按下 Ctrl+Shift+B 開啟 VS Code 中的任務列表，然後選擇 tsc: watch - tsconfig.json。

您將看到一個終端視窗開啟，如下所示：

現在，好訊息是您完成了！現在，您可以更改 index.ts 檔案並檢視每次儲存時它即時轉換為 JavaScript 程式碼。

示例

透過按下 Cmd + \ 將您的 VS Code 編輯器螢幕分成兩部分，並將以下程式碼複製貼上到您的 index.ts 檔案中。現在，使用 Cmd + s 儲存檔案。

console.log("Live compilation of TypeScript files")

function add(x: number, y: number): number {
   return x+y
}
console.log(add(4, 5))

您可以在 tsconfig.json 檔案中指定的位置找到轉換後的 JS 檔案。

輸出

您可以透過執行以下命令執行轉換後的 JS 原始碼：

node index.js

結論

總之，使用 OS X 上的 Visual Studio Code 自動編譯 TypeScript 檔案可以顯著提高您的開發工作流程。透過遵循本文中概述的步驟，您可以輕鬆設定 Visual Studio Code 以自動編譯您的 TypeScript 檔案，使您能夠專注於編寫程式碼，而不必擔心手動編譯。隨著 TypeScript 的普及，最佳化您的開發流程至關重要，而自動編譯程式碼是實現這一目標的絕佳方法。