編譯 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
tsc --help

另一種選擇是在專案中本地安裝 TypeScript 編譯器（npm install --save-dev typescript），這樣可以避免與您可能擁有的其他 TypeScript 專案發生潛在的衝突。

編譯器與語言服務

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

稍後在本文中，我們將討論如何更改 VS Code 使用的 TypeScript 語言服務的版本。

tsconfig.json

通常，任何新 TypeScript 專案的第一步是新增一個 tsconfig.json 檔案。tsconfig.json 檔案定義了 TypeScript 的專案設定，例如編譯器選項和應包含的檔案。為此，請開啟您想儲存原始碼的資料夾，並新增一個名為 tsconfig.json 的新檔案。在此檔案中，智慧感知（IntelliSense）（⌃Space (Windows, Linux Ctrl+Space)）將為您提供幫助。

對於 ES5、CommonJS 模組和源對映，一個簡單的 tsconfig.json 檔案如下所示：

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

現在，當您建立專案中的 .ts 檔案時，我們將提供豐富的編輯體驗和語法驗證。

將 TypeScript 轉譯為 JavaScript

VS Code 透過我們整合的任務執行器與 tsc 整合。我們可以使用它將 .ts 檔案轉譯為 .js 檔案。使用 VS Code 任務的另一個好處是，您可以在問題面板中獲得整合的錯誤和警告檢測。讓我們來逐步轉譯一個簡單的 TypeScript Hello World 程式。

步驟 1：建立一個簡單的 TS 檔案

在一個空資料夾中開啟 VS Code，建立一個 helloworld.ts 檔案，並將以下程式碼放入該檔案中…

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

要測試您是否正確安裝了 TypeScript 編譯器 tsc 以及一個可正常工作的 Hello World 程式，請開啟終端並鍵入 tsc helloworld.ts。您可以直接在 VS Code 中使用整合終端（⌃` (Windows, Linux Ctrl+`)）。

您現在應該會看到轉譯後的 helloworld.js JavaScript 檔案，如果您安裝了 Node.js，可以透過鍵入 node helloworld.js 來執行它。

步驟 2：執行 TypeScript 構建

從全域性 終端選單執行 執行構建任務（⇧⌘B (Windows, Linux Ctrl+Shift+B)）。如果您在前面的部分建立了 tsconfig.json 檔案，應該會看到以下選擇器

選擇 tsc: build 條目。這將在工作區中生成一個 HelloWorld.js 檔案和一個 HelloWorld.js.map 檔案。

如果您選擇了 tsc: watch，TypeScript 編譯器將監視 TypeScript 檔案的更改並在每次更改時執行轉譯器。

在底層，我們作為任務執行 TypeScript 編譯器。我們使用的命令是：tsc -p .

步驟 3：將 TypeScript 構建設定為預設值

您還可以將 TypeScript 構建任務定義為預設構建任務，這樣當觸發 執行構建任務（⇧⌘B (Windows, Linux Ctrl+Shift+B)）時，它將直接執行。為此，請從全域性 終端選單中選擇 配置預設構建任務。這將顯示一個包含可用構建任務的選擇器。選擇 TypeScript tsc: build，這將在 .vscode 資料夾中生成以下 tasks.json 檔案

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

請注意，任務包含一個 group JSON 物件，該物件將任務 kind 設定為 build 並將其設為預設值。現在，當您選擇 執行構建任務命令或按（⇧⌘B (Windows, Linux Ctrl+Shift+B)）時，不會提示您選擇任務，並且您的編譯將開始。

提示：您還可以使用 VS Code 的執行/除錯功能來執行程式。有關在 VS Code 中執行和除錯 Node.js 應用程式的詳細資訊，請參閱Node.js 教程

步驟 4：審查構建問題

VS Code 任務系統還可以透過問題匹配器檢測構建問題。問題匹配器根據特定的構建工具解析構建輸出，並提供整合的錯誤顯示和導航。VS Code 附帶許多問題匹配器，而上面 tasks.json 中的 $tsc 是 TypeScript 編譯器輸出的問題匹配器。

例如，如果我們的 TypeScript 檔案中有一個簡單的錯誤（console.log 中的額外“g”），我們可能會從 tsc 得到以下輸出

HelloWorld.ts(3,17): error TS2339: Property 'logg' does not exist on type 'Console'.

這將在終端面板（⌃` (Windows, Linux Ctrl+`)）中顯示，並在終端檢視下拉列表中選擇 Tasks - build tsconfig.json。

您可以在狀態列中看到錯誤和警告計數。單擊錯誤和警告圖示即可獲取問題列表並導航到它們。

您還可以使用鍵盤開啟列表（⇧⌘M (Windows, Linux Ctrl+Shift+M)）。

提示：任務為許多操作提供了豐富的支援。有關如何配置任務的更多資訊，請參閱任務主題。

JavaScript 源對映支援

TypeScript 除錯支援 JavaScript 源對映。要為 TypeScript 檔案生成源對映，請使用 --sourcemap 選項編譯，或在 tsconfig.json 檔案中將 sourceMap 屬性設定為 true。

內聯源對映（一種源對映，其中內容儲存為資料 URL 而不是單獨的檔案）也受支援，但內聯源本身尚不支援。

生成檔案的輸出位置

對於大型專案，將生成的 JavaScript 檔案與 TypeScript 原始檔放在同一資料夾中會很快導致混亂。您可以使用 outDir 屬性為編譯器指定輸出目錄。

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

隱藏生成的 JavaScript 檔案

在使用 TypeScript 時，您通常不希望在檔案資源管理器或搜尋結果中看到生成的 JavaScript 檔案。VS Code 提供了使用 files.exclude 工作區設定進行篩選的功能，您可以輕鬆建立表示式來隱藏這些生成的派生檔案。

**/*.js: { "when": "$(basename).ts" }

此模式將匹配任何 JavaScript 檔案（**/*.js），但前提是存在同名的同級 TypeScript 檔案。如果生成的 JavaScript 檔案與 TypeScript 檔案位於同一位置，檔案資源管理器將不再顯示派生資源。

在工作區根目錄下的 .vscode 資料夾中，在工作區 settings.json 檔案中新增帶有篩選器的 files.exclude 設定。您可以透過命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)）中的 首選項：開啟工作區設定 (JSON) 命令來開啟工作區 settings.json。

要排除由 .ts 和 .tsx 原始檔生成的 JavaScript 檔案，請使用此表示式：

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },
    "**/**.js": { "when": "$(basename).tsx" }
}

這有點技巧。搜尋 Glob 模式用作鍵。上面的設定使用了兩個不同的 Glob 模式來提供兩個唯一的鍵，但搜尋仍然會匹配相同的檔案。

使用較新版本的 TypeScript

VS Code 隨附了最新穩定的 TypeScript 語言服務版本，預設情況下將其用於在您的工作區中提供智慧感知。工作區的 TypeScript 版本獨立於您用於編譯 *.ts 檔案的 TypeScript 版本。在大多數常見情況下，您可以僅使用 VS Code 內建的 TypeScript 版本進行智慧感知，而無需擔心，但有時您可能需要更改 VS Code 用於智慧感知的 TypeScript 版本。

這樣做的原因包括：

• 透過切換到 TypeScript 夜間構建（typescript@next）來嘗試最新的 TypeScript 功能。
• 確保將 TypeScript 的版本用於智慧感知與用於編譯程式碼的版本相同。

當您開啟 TypeScript 檔案並在狀態列中固定語言狀態列的版本號時，狀態列中可以顯示活動的 TypeScript 版本及其安裝位置。

如果您想更改工作區中 TypeScript 的預設版本，有幾種選擇：

使用工作區的 TypeScript 版本

如果您的工作區具有特定的 TypeScript 版本，您可以透過開啟 TypeScript 或 JavaScript 檔案並單擊狀態列中的 TypeScript 版本號，在 VS Code 預設使用的 TypeScript 版本和工作區 TypeScript 版本之間進行切換。將出現一個訊息框，詢問 VS Code 應使用哪個版本的 TypeScript。

使用此選項可以在 VS Code 隨附的 TypeScript 版本和工作區中的 TypeScript 版本之間切換。您還可以使用 TypeScript: 選擇 TypeScript 版本命令觸發 TypeScript 版本選擇器。

VS Code 會自動檢測安裝在工作區根目錄 node_modules 下的工作區 TypeScript 版本。您還可以透過在使用者或工作區 設定中配置 typescript.tsdk 來顯式告訴 VS Code 使用哪個版本的 TypeScript。typescript.tsdk 設定應指向包含 TypeScript tsserver.js 檔案的目錄。您可以使用 npm list -g typescript 找到 TypeScript 的安裝位置。tsserver.js 檔案通常位於 lib 資料夾中。

例如

{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

提示：要獲取特定版本的 TypeScript，請在 npm 安裝時指定 @version。例如，對於 TypeScript 3.6.0，您將使用 npm install --save-dev typescript@3.6.0。要預覽下一版本的 TypeScript，請執行 npm install --save-dev typescript@next。

請注意，儘管在這些示例中 typescript.tsdk 指向 typescript 中的 lib 目錄，但 typescript 目錄必須是完整的 TypeScript 安裝，其中包含 TypeScript package.json 檔案。

您還可以透過新增一個指向 tsserver.js 檔案目錄的 typescript.tsdk 工作區設定，讓 VS Code 在特定工作區中使用特定版本的 TypeScript。

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

typescript.tsdk 工作區設定僅告訴 VS Code 工作區版本的 TypeScript 存在。要實際開始使用工作區版本進行智慧感知，您必須執行 TypeScript: 選擇 TypeScript 版本命令並選擇工作區版本。

使用 TypeScript 夜間構建

在 VS Code 中嘗試最新的 TypeScript 功能的最簡單方法是安裝 JavaScript 和 TypeScript Nightly 擴充套件。

此擴充套件會自動替換 VS Code 內建的 TypeScript 版本為最新的 TypeScript 夜間構建。只需確保如果您已透過 TypeScript: 選擇 TypeScript 版本命令配置了 TypeScript 版本，則切換回使用 VS Code 的 TypeScript 版本。

混合 TypeScript 和 JavaScript 專案

可以擁有混合 TypeScript 和 JavaScript 專案。要在 TypeScript 專案中啟用 JavaScript，您可以在 tsconfig.json 中將 allowJs 屬性設定為 true。

提示： tsc 編譯器不會自動檢測到 jsconfig.json 檔案的存在。使用 –p 引數使 tsc 使用您的 jsconfig.json 檔案，例如 tsc -p jsconfig.json。

處理大型專案

如果您在一個包含數百或數千個 TypeScript 檔案的程式碼庫中工作，可以採取以下一些步驟來改進 VS Code 中的編輯體驗以及命令列編譯時間。

確保您的 tsconfig 只包含您關心的檔案

在專案 tsconfig.json 中使用 include 或 files 來確保專案只包含應屬於專案的檔案。

有關配置專案 tsconfig.json 的更多資訊。

使用專案引用分解您的專案

與其將原始碼結構化為單個大型專案，不如透過使用專案引用將其分解為更小的專案來提高效能。這允許 TypeScript 一次只加載程式碼庫的一部分，而不是載入整個程式碼庫。

有關如何使用專案引用以及與它們一起工作的最佳實踐的詳細資訊，請參閱TypeScript 文件。

後續步驟

繼續閱讀以瞭解：

• 編輯 TypeScript - TypeScript 的特定編輯功能。
• 重構 TypeScript - TypeScript 語言服務提供的有用重構。
• 除錯 TypeScript - 為您的 TypeScript 專案配置偵錯程式。

常見問題

如何解決 TypeScript "無法編譯外部模組" 錯誤？

如果您遇到該錯誤，請透過在專案根資料夾中建立 tsconfig.json 檔案來解決。tsconfig.json 檔案允許您控制 Visual Studio Code 如何編譯 TypeScript 程式碼。有關更多資訊，請參閱tsconfig.json 概述。

為什麼我使用 VS Code 得到的錯誤和警告與編譯 TypeScript 專案時不同？

VS Code 附帶最新穩定的 TypeScript 語言服務版本，可能與您計算機上全域性安裝或工作區本地安裝的 TypeScript 版本不匹配。因此，您可能會在編譯器輸出和活動 TypeScript 語言服務檢測到的錯誤之間看到差異。有關安裝匹配的 TypeScript 版本的詳細資訊，請參閱使用較新版本的 TypeScript。

我可以使用 VS 2022 附帶的 TypeScript 版本嗎？

不可以，Visual Studio 2019 和 2022 附帶的 TypeScript 語言服務與 VS Code 不相容。您需要從npm 安裝一個單獨的 TypeScript 版本。

為什麼有些錯誤被報告為警告？

預設情況下，VS Code TypeScript 將程式碼樣式問題顯示為警告而不是錯誤。這適用於：

• 已宣告但從未使用的變數
• 已宣告但其值從未被讀取的屬性
• 檢測到不可達程式碼
• 未使用的標籤
• Switch 語句中的 fall through case
• 並非所有程式碼路徑都返回值

將這些視為警告與其他工具（如 TSLint）一致。當您從命令列執行 tsc 時，它們仍會顯示為錯誤。

您可以透過在使用者 設定中設定 "typescript.reportStyleChecksAsWarnings": false 來停用此行為。