編譯 TypeScript 程式代碼 （Node.js）

使用 npm 新增 TypeScript 支援

TypeScript npm 套件 新增 TypeScript 支援。 將 TypeScript 2.1 或更高版本的 npm 套件安裝到您的專案中時，會在編輯器中載入對應的 TypeScript 語言服務版本。

1. 檢查您是否需要為 Visual Studio 或 Node.js 執行階段安裝任何開發工作負載。

   對於使用 JavaScript 項目系統 （JSPS） 建立的專案，或 .esproj，不需要額外的工作負載。 您只需安裝 npm（https://www.npmjs.com/），它隨附於 Node.js。

   針對較舊的專案類型（.njsproj），您必須安裝 Node.js 開發工作負載和 Node.js 執行階段。

   請依照 的指示安裝含有 Node.js的 Node.js 開發工作負載和 npm（https://www.npmjs.com/）。

   如需簡單的 Visual Studio 整合，請使用其中一個 Node.js TypeScript 範本來建立專案，例如空白 Node.js Web 應用程式範本。 否則，請使用 Visual Studio 隨附的 Node.js JavaScript 範本，並遵循這裡的指示。 或者，使用 [開啟資料夾] 專案。

2. 如果您的專案尚未包含它，請安裝 TypeScript npm 套件。

   從 [方案總管] （右窗格），開啟專案根目錄中的 package.json。 列出的套件對應於 [方案總管] 中的 npm 節點下的套件。 如需詳細資訊，請參閱 管理 npm 套件。

   針對 Node.js 專案，您可以使用命令行或 IDE 來安裝 TypeScript npm 套件。 若要使用 IDE 安裝，請以滑鼠右鍵按兩下 [方案總管] 中的 npm 節點，選擇 [安裝新的 npm 套件]，搜尋 TypeScript，然後安裝套件。

   檢查 [輸出] 視窗中的 [npm] 選項，以查看套件安裝進度。 已安裝的套件會顯示在 [方案總管] 中的 [npm] 節點底下。

3. 如果您的專案尚未包含它，請將 tsconfig.json 檔案新增至您的專案根目錄。 若要新增檔案，請以滑鼠右鍵按下專案節點，然後選擇 [新增 > 新項目]。 選擇 TypeScript JSON 組態檔，然後按一下 新增。

   如果您沒有看到所有項目範本，請選擇 [顯示所有範本]，然後選擇項目範本。

   Visual Studio 會將 tsconfig.json 檔案新增至專案根目錄。 您可以使用此檔案來 TypeScript 編譯程式 設定選項。

4. 開啟 tsconfig.json 並更新以設定您想要的編譯程序選項。

   一個簡單的 tsconfig.json 檔案的例子如下。

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   在這個範例中：

   • 包含 會告訴編譯程式在哪裡尋找 TypeScript （*.ts） 檔案。
   • outDir 選項會指定 TypeScript 編譯程式所轉譯之純 JavaScript 檔案的輸出資料夾。
   • sourceMap 選項會指出編譯程式是否產生 sourceMap 檔案。

   先前的設定只提供設定 TypeScript 的基本簡介。 如需其他選項的詳細資訊，請參閱 tsconfig.json。

建置應用程式

1. 將 TypeScript （.ts） 或 TypeScript JSX （.tsx） 檔案新增至您的專案，然後新增 TypeScript 程式代碼。 TypeScript 的簡單範例如下：

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

2. 在 package.json中，使用下列腳本新增Visual Studio建置和清除命令的支援。

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   若要使用 Webpack 之類的第三方工具來建置，您可以將命令行建置腳本新增至您的 package.json 檔案：

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

   如需搭配 React 和 Webpack 組態檔使用 Webpack 的範例，請參閱 使用 Node.js 和 React建立 Web 應用程式。

   如需搭配 TypeScript 使用 Vue.js 的範例，請參閱 建立 Vue.js 應用程式。

3. 如果您需要設定例如啟動頁面、Node.js 執行時間的路徑、應用程式埠或執行時間參數，請在 [方案總管] 中對專案節點按右鍵，然後選擇 [屬性] 。

   注意

   設定第三方工具時，Node.js 專案不會使用在 [工具]>[選項] 底下設定的路徑，>[專案] 和 [方案]>[Web 套件管理]>[外部 Web 工具]。 這些設定用於其他項目類型。

4. 選擇 建置 > 建置方案。

   當您執行應用程式時，應用程式會自動建置。 不過，在建置程式期間可能會發生下列情況：

   如果您生成了原始映射，請開啟在 [outDir] 選項中指定的資料夾，然後找到生成的 *.js 檔案以及 *js.map 檔案。

   偵錯需要來源對應檔案。

執行應用程式

自動化建置工作

您可以在 Visual Studio 中使用工作執行器總管，協助將 npm 和 Webpack 等第三方工具的工作自動化。

• NPM 工作執行器 - 新增對 package.json中所定義 npm 腳本的支援。 支援 Yarn。
• Webpack 工作執行器 - 新增對 Webpack 的支援。

相關內容

屬性、React、Angular、Vue