教學課程：在Visual Studio中將 TypeScript 新增至現有的 ASP.NET Core 應用程式

發行項
01/27/2025

在本教學課程中，使用 ASP.NET Core 和 TypeScript 進行 Visual Studio 開發時，您會建立簡單的 Web 應用程式、新增一些 TypeScript 程式代碼，然後執行應用程式。

在 Visual Studio 2022 和更新版本中，如果您想要搭配 ASP.NET Core 使用 Angular 或 Vue，建議您使用 ASP.NET 核心單頁應用程式（SPA）範本來建立具有 TypeScript 的 ASP.NET Core 應用程式。如需詳細資訊，請參閱 Angular 或 Vue的 Visual Studio 教學課程。

如果您尚未安裝 Visual Studio，請移至 Visual Studio 下載頁面免費安裝。

在本教學課程中，您將瞭解如何：

建立 ASP.NET Core 專案
新增 TypeScript 支援的 NuGet 套件
新增一些 TypeScript 程式代碼
執行應用程式
使用 npm 新增第三方連結庫

先決條件

您必須已安裝 Visual Studio 和 ASP.NET Web 開發工作負載。

如果您尚未安裝 Visual Studio，請移至 Visual Studio 下載頁面免費安裝。
如果您需要安裝工作負載，但已經有Visual Studio，請移至 Tools>Get Tools and Features... 以開啟 Visual Studio 安裝程式。選擇 ASP.NET 和 Web 開發 工作負載，然後選取 [修改]。

建立新的 ASP.NET Core MVC 專案

Visual Studio 會管理 項目中單一應用程式的檔案，。專案包含原始程式碼、資源和組態檔。

注意

若要從空白的 ASP.NET Core 專案開始，並新增 TypeScript 前端，請改為參閱 ASP.NET Core with TypeScript。

在本教學課程中，您會從包含 ASP.NET Core MVC 應用程式的程式代碼的簡單項目開始。

開啟 Visual Studio。如果啟動視窗未開啟，請選擇 [檔案]>[開始視窗]。
在 [開始] 視窗中，選擇 [[建立新專案]。
在 [建立新專案] 視窗中，在搜尋方塊中輸入 網站應用程式。接下來，選擇 C# 作為語言。

套用語言篩選之後，請選擇 [ASP.NET Core Web 應用程式][模型-View-Controller]，然後選取 [下一步] 。

注意

如果您沒有看到 ASP.NET Core Web 應用程式 項目範本，則必須新增 ASP.NET 和 Web 開發 工作負載。如需詳細指示，請參閱必要條件。
在 [[設定新專案] 視窗中，於 [專案名稱] 方塊中輸入項目的名稱。然後，選取 [下一步]。

選取建議的目標 Framework（.NET 8.0 或長期支援），然後選取「建立」。

在 [其他資訊] 視窗中，確定已選取 [Framework] 下拉功能表中的 [.NET 8.0]，然後選取 [建立 ]。

Visual Studio 會開啟您的新專案。

新增一些程序代碼

在 [方案總管] （右窗格）中，以滑鼠右鍵按兩下項目節點，然後選取 [[管理方案的 NuGet 套件]。
在 [瀏覽] 索引標籤中，搜尋 Microsoft.TypeScript.MSBuild。
選取安裝以安裝套件。

Visual Studio 會在 [方案總管] 中的 [相依性] 節點底下新增 NuGet 套件。
以滑鼠右鍵按一下專案節點，然後選取 [新增 > 新增項目]。選擇 TypeScript JSON 組態檔，然後選擇新增。

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

Visual Studio 會將 tsconfig.json 檔案新增至專案根目錄。您可以使用此檔案來配置 TypeScript 編譯器的選項。
開啟 tsconfig.json，並以下列程式代碼取代預設程式碼：
```
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
```
outDir 選項會指定 TypeScript 編譯程式所轉譯之一般 JavaScript 檔案的輸出資料夾。

此設定提供使用 TypeScript 的基本簡介。在其他案例中，例如使用 gulp 或 webpack時，您可能會想要轉譯 JavaScript 檔案的不同中繼位置，而不是 wwwroot/js。位置取決於您的工具和組態喜好設定。
在 [方案總管] 中，按一下滑鼠右鍵項目節點，然後選取 [新增] > > [新增資料夾]。將新資料夾命名為文稿。
以滑鼠右鍵按下文稿資料夾，然後選取 [[新增 > 新專案]。選擇 TypeScript 檔案，輸入檔案名稱 app.ts，然後選取新增。

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

Visual Studio 會將 app.ts 新增至腳本資料夾。

開啟 app.ts 並新增下列 TypeScript 程式代碼。

function TSButton() {
   let name: string = "Fred";
   document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}

interface Person {
   firstName: string;
   lastName: string;
}

function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

Visual Studio 為您的 TypeScript 程式代碼提供 IntelliSense 支援。

若要嘗試這個功能特性，請從 greeter 函式中移除 .lastName，重新輸入句點（.），並注意 IntelliSense 的更新。

檢視 IntelliSense

選取【lastName】將姓氏新增回代碼。

開啟 Views/Home 資料夾，然後開啟 Index.cshtml。

將下列 HTML 程式代碼新增至檔案結尾。

<div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

開啟 Views/Shared 資料夾，然後開啟 _Layout.cshtml。
在呼叫 @RenderSectionAsync("Scripts", required: false)之前新增下列腳本參考：
```
<script src="~/js/app.js"></script>
```
選取 [檔案]>[全部儲存] [Ctrl + Shift + S] 來儲存變更。

建置應用程式

選取 建置 > 建置方案。

雖然應用程式會在您執行時自動建置，但我們想要查看建置程式期間發生的情況。
開啟 wwwroot/js 資料夾，以查看兩個新檔案：app.js 和來源對應檔案，app.js.map。 TypeScript 編譯程式會產生這些檔案。

需要原始碼映射檔案才能進行偵錯。

執行應用程式

按 F5 （Debug>Start Debug）來執行應用程式。

應用程式會在瀏覽器中開啟。

在瀏覽器視窗中，您會看到歡迎標題和 點擊我 按鈕。

zh-TW:
選取按鈕以顯示我們在 TypeScript 檔案中指定的訊息。

對應用程式進行偵錯

按兩下程式代碼編輯器的左邊界，在 app.ts 中設定 greeter 函式中的斷點。
按 F5 以執行應用程式。

您可能需要回應訊息，才能啟用腳本偵錯。

注意

用戶端腳本偵錯需要 Chrome 或 Edge。
當頁面載入時，請按 [點擊我]。

應用程式會在斷點暫停。現在，您可以檢查變數並使用調試程式功能。

新增對第三方函式庫的 TypeScript 支援

請遵循 npm 套件管理中的指示，將 package.json 檔案新增至您的專案。此工作會將 npm 支援新增至您的專案。

注意

針對 ASP.NET Core 專案，您也可以使用 Library Manager 或 yarn，而不是 npm 來安裝用戶端 JavaScript 和 CSS 檔案。
在此範例中，將 jQuery 的 TypeScript 定義檔新增至您的專案。在您的 package.json 檔案中包含下列程序代碼。
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
此程式代碼會新增 jQuery 的 TypeScript 支援。 jQuery 函式庫本身已包含在 MVC 專案範本中（在 [方案總管] 中查看 wwwroot/lib 下方）。如果您使用不同的範本，您可能也需要包含 jquery npm 套件。
如果未安裝方案總管中的套件，請以滑鼠右鍵按下 npm 節點，然後選擇 [還原套件]。

注意

在某些情況下，方案總管可能會指出 npm 套件與 package.json 不同步，這是由於此處中描述的已知問題。例如，套件可能會在安裝時顯示為未安裝。在大部分情況下，您可以刪除 package.json、重新啟動Visual Studio，然後重新新增 package.json 檔案，以更新方案總管，如本文稍早所述。
在 [方案總管] 中，以滑鼠右鍵點擊腳本資料夾，然後選擇 [新增>項目]。

如果您沒有看到所有項目範本，請選擇 [顯示所有範本]，然後選擇項目範本。
選擇 TypeScript 檔案，輸入 library.ts，然後選擇新增。
在 library.ts中，新增下列程序代碼。
```
var jqtest = {
  showMsg: function (): void {
     let v: any = jQuery.fn.jquery.toString();
     let content: any = $("#ts-example-2")[0].innerHTML;
     alert(content.toString() + " " + v + "!!");
     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
  }
};

jqtest.showMsg();
```
為了簡單起見，此程式代碼會使用 jQuery 和警示來顯示訊息。

新增 jQuery 的 TypeScript 類型定義之後，當您在 jQuery 對象之後輸入句點時，您會在 jQuery 物件上取得 IntelliSense 支援，如下所示。

在 _Layout.cshtml中，更新文稿參考以包含 library.js。

<script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>

在 Index.cshtml中，將下列 HTML 新增至檔案結尾。

<div>
  <p id="ts-example-2">jQuery version is:</p>
</div>

按 F5 （Debug>Start Debug）來執行應用程式。

應用程式會在瀏覽器中開啟。

在警示中選擇 [確定]，以查看更新為 jQuery 版本為：3.3.1！。

後續步驟

您可能想要深入瞭解如何搭配 ASP.NET Core 使用 TypeScript。如果您對 Visual Studio 中的 Angular 程式設計感興趣，可以使用適用於 Visual Studio 的 Angular 語言服務延伸模組。

ASP.NET Core 和 TypeScript

Angular 語言服務延伸模組

共用方式為