チュートリアル: Visual Studio で既存の ASP.NET Core アプリに TypeScript を追加する

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 チュートリアルを参照してください。

このチュートリアルでは、以下の内容を学習します。

ASP.NET Core プロジェクトを作成する
TypeScript サポート用の NuGet パッケージを追加する
TypeScript コードを追加する
アプリを実行する
npm を使用してサードパーティ製ライブラリを追加する

[前提条件]

Visual Studio がインストールされ、ASP.NET Web 開発ワークロードが必要です。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロードページに移動して無料でインストールします。
ワークロードをインストールする必要があるが、既に Visual Studio がある場合は、[ ツール>Get Tools and Features... に移動して、Visual Studio インストーラーを開きます。 ASP.NET と Web 開発ワークロードを選択し、[変更] を選択します。

新しい ASP.NET Core MVC プロジェクトを作成する

Visual Studio は 、プロジェクト内の 1 つのアプリケーションのファイルを管理します。プロジェクトには、ソースコード、リソース、および構成ファイルが含まれています。

注

空の ASP.NET Core プロジェクトから開始し、TypeScript フロントエンドを追加するには、代わりに TypeScript を使用した ASP.NET Core を参照してください。

このチュートリアルでは、ASP.NET Core MVC アプリのコードを含む単純なプロジェクトから始めます。

Visual Studio を開きます。スタートウィンドウが開いていない場合は、[ファイル][スタートウィンドウ]選択します。
スタートウィンドウで、[新しいプロジェクト作成] を選択します。
[ 新しいプロジェクトの作成 ] ウィンドウで、検索ボックスに 「Web アプリ 」と入力します。次に、言語として C# を選択します。

言語フィルターを適用した後、 Core Web App (Model-View-Controller) ASP.NET 選択し、[ 次へ] を選択します。

注

ASP.NET Core Web アプリケーション プロジェクトテンプレートが表示されない場合は、ASP.NET と Web 開発ワークロードを追加する必要があります。詳細な手順については、「前提条件」を参照してください。
[ 新しいプロジェクトの構成 ] ウィンドウで、[プロジェクト名] ボックスにプロジェクトの名前を入力します。次に、 [次へ] を選択します。

[追加情報] ウィンドウで、[フレームワーク] ドロップダウンメニューで [.NET 8.0 以降] が選択されていることを確認し、[作成] を選択します。

Visual Studio で新しいプロジェクトが開きます。

コードを追加する

ソリューションエクスプローラー (右側のウィンドウ) で、プロジェクトノードを右クリックし、[ ソリューションの NuGet パッケージの管理] を選択します。
[ 参照 ] タブで、 Microsoft.TypeScript.MSBuild を検索します。
[ インストール] を選択してパッケージをインストールします。

Visual Studio は、ソリューションエクスプローラーの Dependencies ノードの下に NuGet パッケージを追加します。
プロジェクトノードを右クリックし、[ 新しい項目 > 追加] を選択します。 TypeScript JSON 構成ファイルを選択し、その後、で [の追加] を選択します。

すべての項目テンプレートが表示されない場合は、[すべてのテンプレートの表示]選択し、項目テンプレートを選択します。

Visual Studio によって、 tsconfig.json ファイルがプロジェクトルートに追加されます。このファイルを使用して、TypeScript コンパイラのオプションを構成できます。
tsconfig.jsonを開き、既定のコードを次のコードに置き換えます。
```
 {
   "compileOnSave": true,
   "compilerOptions": {
     "noImplicitAny": false,
     "noEmitOnError": true,
     "removeComments": false,
     "sourceMap": true,
     "target": "ES6",
     "rootDir": "./scripts",
     "outDir": "wwwroot/js"
   },
   "include": [
     "scripts/**/*"
   ],
   "exclude": [
     "node_modules",
     "wwwroot"
   ]
 }
```
outDir オプションは、TypeScript コンパイラがトランスパイルするプレーンな JavaScript ファイルの出力フォルダーを指定します。

この構成では、TypeScript の基本的な使用方法について説明します。 gulp や webpack を使用する場合など、他のシナリオでは、wwwroot/js ではなく、トランスパイルされた JavaScript ファイル用に別の中間の場所が必要になる場合があります。場所は、ツールと構成の設定によって異なります。
ソリューションエクスプローラーで、プロジェクトノードを右クリックし、[ 新しいフォルダー > 追加] を選択します。新しいフォルダーの名前 スクリプト を使用します。
scripts フォルダーを右クリックし、[新しい項目>追加] を選択します。 TypeScript ファイルを選択し、ファイル名の名前app.tsを入力し、[追加] を選択します。

すべての項目テンプレートが表示されない場合は、[すべてのテンプレートの表示]選択し、項目テンプレートを選択します。

Visual Studio によってapp.ts フォルダーにが追加されます。

app.ts開き、次の TypeScript コードを追加します。

 function TSButton() {
     let name: string = "Fred";
     const element = document.getElementById("ts-example");
     if (element) {
         element.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 のサポートが提供されます。

この機能を試すには、.lastName関数からgreeterを削除し、期間 (.) を再入力して、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 を開きます。
@await RenderSectionAsync("Scripts", required: false)の呼び出しの前に、次のスクリプト参照を追加します。
```
<script src="~/js/app.js"></script>
```
[ファイル]>[すべて保存] (Ctrl + Shift + S) を選択して変更を保存します。

アプリケーションをビルドする

ビルド > ビルドソリューションを選択します。

アプリを実行するとアプリが自動的にビルドされますが、ビルドプロセス中に発生する処理を確認する必要があります。
wwwroot/js フォルダーを開き、app.js とソースマップファイルの 2 つの新しいファイル (.mapapp.js) を表示します。 TypeScript コンパイラは、これらのファイルを生成します。

デバッグにはソースマップファイルが必要です。

アプリケーションを実行する

F5 (デバッグ>デバッグの開始) キーを押して、アプリケーションを実行します。

アプリがブラウザーで開きます。

ブラウザーウィンドウに、[ ようこそ ] 見出しと [クリック する] ボタンが表示されます。
ボタンを選択して、TypeScript ファイルで指定したメッセージを表示します。

アプリケーションをデバッグする

コードエディターの左余白をクリックして、greeterのapp.ts関数にブレークポイントを設定します。
F5 押して、アプリケーションを実行します。

スクリプトのデバッグを有効にするには、メッセージへの応答が必要な場合があります。

注

クライアント側スクリプトのデバッグには、Chrome または Edge が必要です。
ページが読み込まれたら、クリックしてください。

アプリケーションはブレークポイントで一時停止します。これで、変数を検査し、デバッガー機能を使用できるようになりました。

サードパーティ製ライブラリの TypeScript サポートを追加する

npm パッケージ管理の手順に従って、package.json ファイルをプロジェクトに追加します。このタスクは、npm のサポートをプロジェクトに追加します。

注

ASP.NET Core プロジェクトの場合は、npm の代わりに Library Manager または yarn を使用して、クライアント側の JavaScript ファイルと CSS ファイルをインストールすることもできます。
この例では、jQuery の TypeScript 定義ファイルをプロジェクトに追加します。 package.json ファイルに次のコードを含めます。
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
このコードは、jQuery の TypeScript サポートを追加します。 jQuery ライブラリ自体は、MVC プロジェクトテンプレートに既に含まれています (ソリューションエクスプローラーの wwwroot/lib を参照)。別のテンプレートを使用している場合は、jquery npm パッケージも含める必要があります。
ソリューションエクスプローラーでパッケージがインストールされていない場合は、npm ノードを右クリックし、[ パッケージの復元] を選択します。

注

一部のシナリオでは、package.json説明する既知の問題が原因で、npm パッケージがと同期していないとソリューションエクスプローラーで示される場合があります。たとえば、パッケージはインストール時にインストールされていないと表示される場合があります。ほとんどの場合、ソリューションエクスプローラーを更新するには、 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 がサポートされます。
_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 (デバッグ>デバッグの開始) キーを押して、アプリケーションを実行します。

ブラウザーでアプリが開きます。

アラートで [OK] を 選択すると、jQuery バージョンに更新されたページ が 3.3.1!! と表示されます。