TypeScriptをBlazor Clientに導入する手順

kaneharu

Step0：新しい項目の追加(Ctrl+Shift+A)からwwwroot直下にTypeScriptファイルを作成します。

画像1

Step1： Microsoft.TypeScript.MSBuildをNugetで追加する
Step2：.csprojファイルの編集（以下を追加する）


 <ItemGroup>
   <TypeScriptCompile Include="wwwroot\TypeScript.ts" />
 </ItemGroup>

Step3：Buildする。
うまくビルドが走った場合、TypeScript.mapとTypeScript.jsが新しくwwwroot直下に生成されているはずです。

TypeScriptでコンパイルしたJavaScriptを呼び出す

wwwroot直下のindex.htmlに<script src="TypeScript.js"></script>の一行を追加します。

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>TypeScriptTest</title>
   <base href="/" />
   <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
   <link href="css/app.css" rel="stylesheet" />
</head>

<body>
   <app>Loading...</app>

   <div id="blazor-error-ui">
       An unhandled error has occurred.
       <a href="" class="reload">Reload</a>
       <a class="dismiss">🗙</a>
   </div>
   <script src="_framework/blazor.webassembly.js"></script>
   <script src="TypeScript.js"></script>
</body>

</html>

IJSRuntimeを用いた呼び出し

@inject IJSRuntime JSRuntime
@page "/"

<h1>TypeScriptTest</h1>

<input @bind="text" @bind:event="oninput" />
<button @onclick="TsAlertClick">TsAlert</button>
<button @onclick="TsEditTextClick">@TsEditText</button>

@code{
   string text;
   string TsEditText = "TsEditText";

   private void TsAlertClick()
   {
       JSRuntime.InvokeVoidAsync("Functions.showAlert", text);
   }

   private async Task TsEditTextClick()
   {
       TsEditText = await JSRuntime.InvokeAsync<string>("Functions.editText", text);
   }
}


出典：https://qiita.com/Atria/items/928eaff0c9f088545ca2


いいなと思ったら応援しよう！