共用方式為

使用 npm 編譯 TypeScript 程式碼

使用 TypeScript npm 套件，根據 JavaScript 項目系統 （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. 檢查一下你是否需要安裝任何開發工作負載給 Visual Studio 或 Node.js 執行環境。

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

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

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

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

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

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

    Visual Studio 會將 tsconfig.json 檔案加入專案根目錄。 你可以利用這個檔案來設定 tsc（TypeScript 編譯器） 的選項 ，該編輯器會將 TypeScript 轉譯成 JavaScript。

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

    簡單 tsconfig.json 檔案的范例如下。

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

    在這個範例中：

    • 包含 會告訴編譯程式在哪裡尋找 TypeScript （*.ts） 檔案。
    • outDir 選項指定由 tsc（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"
}

  3. 如果你需要設定建置和部署選項，例如應用程式 URL 或執行時指令，請在 方案總管 中右鍵點擊專案節點，選擇 Properties。

    注意

    設定第三方工具時，使用 JavaScript 項目系統 （JSPS） 或 .esproj 的專案不會使用 [ 工具選項專案] 和 [Web套件管理外部 Web 工具] 下設定的路徑。 這些設定用於其他項目類型。

  4. 選擇 [建置 建置方案]。

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

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

    偵錯需要來源對應檔案。

執行應用程式

關於轉檔後如何執行應用程式的說明，請參見 「建立 Node.js 與快速應用程式」。

自動化建置工作

你可以在 Visual Studio 中使用 Task Runner Explorer，協助自動化第三方工具如 npm 和 webpack 的任務。

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

相關內容

屬性、React、Angular、Vue

  • Last updated on