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，您可以透過以下方式在電腦上全域 (-g) 安裝 TypeScript

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'。您可以在編輯器 (帶有 hover 資訊的紅色波浪線) 和 [問題] 面板 (⇧⌘M (Windows、Linux Ctrl+Shift+M)) 中看到類型檢查錯誤。[ts] 前置詞可讓您知道此錯誤來自 TypeScript 語言服務。

快速修正

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

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

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

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

偵錯

VS Code 內建支援 TypeScript 偵錯。為了支援偵錯 TypeScript 以及執行的 JavaScript 程式碼，VS Code 依賴 source map，讓偵錯工具可以在原始 TypeScript 原始碼和執行的 JavaScript 之間進行對應。您可以在建置期間建立 source map，方法是在您的 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。開啟 source map 並重新建置您的專案。