編譯 TypeScript 程式碼 (Node.js)

  • 發行項

使用 TypeScript npm 套件，根據 JavaScript Project System (JSPS) 或 .esproj，將 TypeScript 支援新增至專案。 從 Visual Studio 2019 開始，建議您使用 npm 套件，而不是 TypeScript SDK。 TypeScript npm 套件可在不同平台和環境之間提供更大的可攜性。

重要

針對 ASP.NET Core 專案，請使用 NuGet 套件，而不是 npm 來新增 TypeScript 支援。

使用 npm 新增 TypeScript 支援

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

  1. 遵循指示來安裝 Node.js 開發工作負載和 Node.js 執行階段。

    若要進行簡單的 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/**/*"
  ]
}

    在此範例中：

    • include 會告知編譯器要在哪裡尋找 TypeScript (*.ts) 檔案。
    • outDir 選項會指定純 JavaScript 檔案的輸出檔案夾，而這些檔案是由 TypeScript 編譯器所轉譯。
    • 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 檔案。

    需要來源對應檔案才能進行偵錯。

執行應用程式

如需在編譯應用程式之後執行應用程式的指示，請參閱建立 Node.js 和 Express 應用程式。

自動化建置工作

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

相關內容

屬性、React、Angular、Vue