Visual Studio Code 中的 TypeScript 教學

TypeScript 是 JavaScript 的類型化超集，可編譯為純 JavaScript。它提供類別、模組和介面，以協助您建置穩健的元件。

安裝 TypeScript 編譯器

Visual Studio Code 包含 TypeScript 語言支援，但不包含 TypeScript 編譯器 tsc。您需要全域或在工作區中安裝 TypeScript 編譯器，才能將 TypeScript 原始碼轉譯為 JavaScript (tsc HelloWorld.ts)。

安裝 TypeScript 最簡單的方式是透過 npm，Node.js 套件管理器。如果您已安裝 npm，您可以使用以下方式在電腦上全域安裝 TypeScript (-g)

npm install -g typescript

您可以檢查版本來測試您的安裝。

tsc --version

Hello World

讓我們從簡單的 Hello World Node.js 範例開始。建立一個名為 HelloWorld 的新資料夾並啟動 VS Code。

mkdir HelloWorld
cd HelloWorld
code .

從檔案總管中，建立一個名為 helloworld.ts 的新檔案。

現在加入以下 TypeScript 程式碼。您會注意到 TypeScript 關鍵字 let 和 string 類型宣告。

let message: string = 'Hello World';
console.log(message);

若要編譯您的 TypeScript 程式碼，您可以開啟整合式終端機 (⌃` (Windows、Linux Ctrl+`)) 並輸入 tsc helloworld.ts。這會編譯並建立一個新的 helloworld.js JavaScript 檔案。

如果您已安裝 Node.js，您可以執行 node helloworld.js。

如果您開啟 helloworld.js，您會看到它與 helloworld.ts 看起來沒有太大差異。類型資訊已移除，而 let 現在是 var。

var message = 'Hello World';
console.log(message);

IntelliSense

在 VS Code 中，您可以看到您獲得了語言功能，例如語法醒目提示和括號比對。當您在編輯器中輸入時，您可能已經注意到 IntelliSense，這是由 VS Code 和 TypeScript 語言伺服器提供的智慧程式碼完成和建議。以下您可以看到 console 的方法

當您選取方法時，您會獲得參數說明，而且始終可以取得 hover 資訊。

tsconfig.json

到目前為止，在本教學課程中，您一直依賴 TypeScript 編譯器的預設行為來編譯您的 TypeScript 原始碼。您可以透過新增一個 tsconfig.json 檔案來修改 TypeScript 編譯器選項，該檔案定義 TypeScript 專案設定，例如編譯器選項和應包含的檔案。

重要：若要在本教學課程的其餘部分使用 tsconfig.json，請在不使用輸入檔案的情況下叫用 tsc。TypeScript 編譯器知道要查看您的 tsconfig.json 以取得專案設定和編譯器選項。

新增一個簡單的 tsconfig.json，將選項設定為編譯為 ES5 並使用 CommonJS 模組。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS"
  }
}

當編輯 tsconfig.json 時，IntelliSense (⌃Space (Windows、Linux Ctrl+Space)) 將一路協助您。

預設情況下，如果未包含 files 屬性，TypeScript 會包含目前資料夾和子資料夾中的所有 .ts 檔案，因此我們不需要明確列出 helloworld.ts。

變更建置輸出

將產生的 JavaScript 檔案放在與 TypeScript 原始碼相同的資料夾中，在較大型專案中很快就會變得雜亂，因此您可以使用 outDir 屬性指定編譯器的輸出目錄。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

刪除 helloworld.js 並執行不帶選項的命令 tsc。您會看到 helloworld.js 現在已放置在 out 目錄中。

請參閱編譯 TypeScript以了解 TypeScript 語言服務的其他功能，以及如何使用工作直接從 VS Code 執行您的建置。

錯誤檢查

TypeScript 透過強型別檢查協助您避免常見的程式設計錯誤。例如，如果您將數字指派給 message，TypeScript 編譯器會抱怨「error TS2322: Type '2' is not assignable to type 'string'」。您可以在 VS Code 的編輯器（帶有 hover 資訊的紅色波浪線）和 [問題] 面板 (⇧⌘M (Windows、Linux Ctrl+Shift+M)) 中看到類型檢查錯誤。[ts] 前置詞可讓您知道此錯誤來自 TypeScript 語言服務。

快速修正

TypeScript 語言服務具有強大的診斷功能集，可尋找常見的程式碼問題。例如，它可以分析您的原始碼並偵測無法連線的程式碼，這些程式碼在編輯器中會顯示為灰色。如果您將滑鼠游標停留在原始碼行上方，您會看到一個 hover 說明，如果您將游標放在該行上，您會看到一個快速修正燈泡。

按一下燈泡或按下 ⌘. (Windows、Linux Ctrl+.) 會叫出 [快速修正] 功能表，您可以在其中選取 [移除無法連線的程式碼] 修正。

此外，「程式碼動作 Widget：包含附近快速修正」(editor.codeActionWidget.includeNearbyQuickFixes) 是一個預設啟用的設定，它將從 ⌘. (Windows、Linux Ctrl+.) (命令 ID editor.action.quickFix) 啟動行中最接近的快速修正，無論您的游標在該行中的哪個位置。

此命令會醒目提示將使用 [快速修正] 重構或修正的原始碼。一般的 [程式碼動作] 和非修正重構仍然可以在游標位置啟動。

偵錯

VS Code 具有內建的 TypeScript 偵錯支援。為了支援偵錯 TypeScript 與執行的 JavaScript 程式碼相結合，VS Code 依賴來源地圖，讓偵錯工具在原始 TypeScript 原始碼和執行的 JavaScript 之間建立對應。您可以在建置期間透過在 tsconfig.json 中設定 "sourceMap": true 來建立來源地圖。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

透過執行 tsc 重新建置，您現在應該在 out 目錄中 helloworld.js 旁邊有一個 helloworld.js.map。

在編輯器中開啟 helloworld.ts 的情況下，按下 F5。如果您已安裝其他偵錯工具擴充功能，您需要從下拉式清單中選取 [Node.js]。

偵錯工具將啟動工作階段、執行您的程式碼，並在 [偵錯主控台] 面板中顯示「Hello World」訊息。

在 helloworld.ts 中，按一下編輯器的左側邊界來設定中斷點。如果已設定中斷點，您會看到一個紅色圓圈。再次按下 F5。執行將在中斷點命中時停止，您將能夠在 [執行和偵錯] 檢視 (⇧⌘D (Windows、Linux Ctrl+Shift+D)) 中看到偵錯資訊，例如變數值和呼叫堆疊。

請參閱偵錯 TypeScript以深入了解 VS Code 針對 TypeScript 的內建偵錯支援，以及如何針對您的專案案例設定偵錯工具。

後續步驟

本教學課程快速介紹如何使用 VS Code 進行 TypeScript 開發。請繼續閱讀以深入了解如何使用 VS Code 的編譯和偵錯支援來開發 TypeScript

• 編譯 TypeScript - 使用 VS Code 強大的工作系統來編譯 TypeScript。
• 編輯 TypeScript - TypeScript 的特定編輯功能。
• 重構 TypeScript - 來自 TypeScript 語言服務的實用重構。
• 偵錯 TypeScript - 為您的 TypeScript 專案設定偵錯工具。

常見問題

由於找不到對應的 JavaScript，因此無法啟動程式

您可能未在 tsconfig.json 中設定 "sourceMap": true，而且 VS Code Node.js 偵錯工具無法將您的 TypeScript 原始碼對應到執行的 JavaScript。開啟來源地圖並重新建置您的專案。