編譯 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 檔案。如果派生資源被編譯到同一位置，檔案資源管理器將不再顯示它們。

在工作區 settings.json 檔案中新增帶有過濾器的 files.exclude 設定，該檔案位於工作區根目錄的 .vscode 資料夾中。您可以透過命令面板 (⇧⌘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 語言服務，預設情況下使用它在您的工作區中提供 IntelliSense。工作區版本的 TypeScript 與您用來編譯 *.ts 檔案的 TypeScript 版本是獨立的。在大多數常見情況下，您可以放心地只使用 VS Code 內建的 TypeScript 版本進行 IntelliSense，但有時您可能需要更改 VS Code 用於 IntelliSense 的 TypeScript 版本。

這樣做的原因包括：

• 透過切換到 TypeScript nightly 版本 (typescript@next) 試用最新的 TypeScript 功能。
• 確保為 IntelliSense 使用與編譯程式碼時相同的 TypeScript 版本。

當您透過檢視 TypeScript 檔案並在狀態列中固定了語言狀態列中的版本號時，活動 TypeScript 版本及其安裝位置會顯示在狀態列中。

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

使用工作區版本的 TypeScript

如果您的工作區有特定的 TypeScript 版本，您可以透過開啟 TypeScript 或 JavaScript 檔案並單擊狀態列中的 TypeScript 版本號，在工作區版本的 TypeScript 和 VS Code 預設使用的版本之間進行切換。將出現一個訊息框，詢問 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 install 期間指定 @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 版本。要真正開始對 IntelliSense 使用工作區版本的 TypeScript，您必須執行 TypeScript: 選擇 TypeScript 版本 命令並選擇工作區版本。

使用 TypeScript nightly 版本

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

此擴充套件會自動將 VS Code 內建的 TypeScript 版本替換為最新的 TypeScript nightly 版本。如果您已經使用 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 來停用此行為。