編譯 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)) 將一路協助您。

一個簡單的 tsconfig.json 看起來像這樣，適用於 ES5、CommonJS 模組 和原始碼對應

{
  "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 的執行/偵錯功能來執行程式。在Node.js 教學課程中可以找到有關在 VS Code 中執行和偵錯 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+`)) 並在終端機檢視下拉式清單中選取工作 - 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 衍生資源編譯到相同位置，檔案總管將不再顯示它們。

在工作區 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 每夜建置 (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 安裝期間指定 @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 每夜建置

在 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 來停用此行為。