BlazorでTypeScriptを使用する方法

BlazorアプリケーションでTypeScriptを組み合わせて使用することで、静的型付けのメリットを享受しつつ、Blazorのリッチな機能を活用できます。ここでは、BlazorでTypeScriptを効果的に使用する方法を手順を追って詳しく説明します。

TypeScriptのMSBuildパッケージを追加

TypeScriptのビルドツールをインストールします。
nugetで「Microsoft.TypeScript.MSBuild」パッケージを追加してください。

dotnet add package Microsoft.TypeScript.MSBuild

TypeScriptファイルを追加

wwwroot 配下の任意の場所に、実行するTypeScriptのファイルを作成します。
今回は wwwroot/js/sample.ts にファイルを作成しました。
中身は、後からC#から呼び出されたことを確認するための、テスト用の関数を用意しておきます。

export function sampleFunc() {
  console.log("Hello TypeScript")
}

.csprojファイルにTypeScriptCompileを追加

ビルド時に、TypeScriptのコードをJSに変換するため、.csproj に次の行を追加します。

 <ItemGroup>
   <TypeScriptCompile Include="wwwroot/js/sample.ts" />
 </ItemGroup>

ビルドする

Visual Studioまたは以下のコマンドで対象のプロジェクトをビルドします。

dotnet build

そうすると、wwwroot/js/ の下に、main.js.map と main.js が作られているはずです。
あとは、main.js をBlazor側（C#側）から呼び出すだけです。

TypeScriptの関数を呼び出し

main.js を読み込みます。

<script src="main.js"></script>

C#側から呼び出す処理を書きます。
通常のJavaScript呼び出しと同様に、IJSRuntime 経由で呼び出します。

@inject IJSRuntime JSRuntime

@code {
   private async Task InvokeTS()
   {
       await JSRuntime.InvokeVoidAsync("sampleFunc");
   }
}

ES ModuleとしてTypeScriptを使用する

ES Moduleとは、ECMAScript 2015（ES6）で導入されたモジュールの仕様です。
具体的にはimportで外部のモジュールを読み込み、export で自分のモジュールを外部から利用可能にします。
これにより、JavaScriptコードを小さな部品（モジュール）に分割し、それぞれを独立して開発・テスト・再利用することが可能になりました。

Blazorで、TypeScript ＋ ES Moduleを利用する場合は、次の手順を踏みます。

.csprojファイルにTypeScriptModuleKindオプションを追加

.csproj に次の行を追加します。

  <PropertyGroup>
    ・・・
    <TypeScriptModuleKind>esnext</TypeScriptModuleKind>   <!-- この行を追加 -->
  </PropertyGroup>

TypeScriptの関数を呼び出し

C#側の呼び出しコードを、次のように修正します。

@inject IJSRuntime JSRuntime

@code {

   private IJSObjectReference? _jsModule;

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
        if (firstRender)
        {
            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/main.js");
        }
   }
    
   private async Task InvokeTS()
   {
       await _jsModule.InvokeVoidAsync("sampleFunc");
   }
}

上のコードでは、
まず、OnAfterRenderAsync 関数で main.js をモジュールとして読み込んで IJSObjectReference の参照を保存します。そして、関数の呼び出しはIJSObjectReference 経由で行います。

まとめ

BlazorでTypeScriptを使用する方法 を紹介しました。
結構、手軽に使えるので今後は併用していくのもありかもです。