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

發行項
11/30/2023

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

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

如果您尚未安裝 Visual Studio，請前往 Visual Studio 下載頁面免費進行安裝。

在本教學課程中，您會了解如何：

建立 ASP.NET Core 專案
新增 NuGet 套件以取得 TypeScript 支援
新增一些 TypeScript 程式碼
執行應用程式
使用 npm 新增協力廠商程式庫

必要條件

您必須已安裝 Visual Studio，並具有 ASP.NET Web 開發工作負載。

如果您尚未安裝 Visual Studio，請前往 Visual Studio 下載頁面免費進行安裝。
如果您需要安裝工作負載，但已安裝 Visual Studio，請移至 [工具]> [取得工具與功能...]，以開啟 Visual Studio 安裝程式。選擇 [ASP.NET 與網頁程式開發] 工作負載，然後選取 [修改]。

建立新的 ASP.NET Core MVC 專案

Visual Studio 可在「專案」中管理單一應用程式的檔案。專案包含原始程式碼、資源和組態檔。

注意

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

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

開啟 Visual Studio。如果開始視窗未開啟，請選擇 [檔案]>[開始視窗]。
在開始視窗中，選擇 [建立新專案]。
在 [建立新專案] 視窗上，於搜尋方塊中輸入 web app。接下來，選擇 C# 做為語言。

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

注意

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

選取建議的目標架構 (.NET 8.0 或長期支援)，然後選取 [建立]。

在 [其他資訊] 視窗中，確認已在 [架構] 下拉式功能表中選取 [.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": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
outDir 選項會指定 TypeScript 編譯器所轉譯的純 JavaScript 檔案的輸出資料夾。

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

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

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

開啟 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 更新。

View 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 ([偵錯]>[開始偵錯]) 以執行應用程式。

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

在瀏覽器視窗中，您會看到 [歡迎] 標題和 [按我] 按鈕。
選取此按鈕以顯示我們在 TypeScript 檔案中指定的訊息。

進行應用程式偵錯

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

您可能需要回應訊息，才能啟用指令碼偵錯。

注意

用戶端指令碼偵錯需要 Chrome 或 Edge。
當頁面載入時，請按 [按我]。

應用程式會在中斷點暫停。現在，您可以檢查變數並使用偵錯工具功能。

為協力廠商程式庫新增 TypeScript 支援

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

注意

針對 ASP.NET Core 專案，您也可以使用程式庫管理員或 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 檔案，以更新方案總管，如本文稍早所述。
在方案總管中，以滑鼠右鍵按一下 scripts 資料夾，然後選擇 [新增]>[新項目]。

如果您沒有看到所有項目範本，請選擇 [顯示所有範本]，然後選擇項目範本。
選擇 [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 支援。

Screenshot that shows Intellisense results for the J Query example.

在 _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 ([偵錯]>[開始偵錯]) 以執行應用程式。

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

選取警示中的 [確定]，以查看更新為 jQuery 版本為: 3.3.1!! 的頁面。

下一步

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

ASP.NET Core 和 TypeScript

Angular 語言服務延伸模組