Blazor에서 typescript 사용하기

당연하겠지만 blazor에서 javascript를 사용할 수 있다.

하지만 typescript가 아니면 뭔가 불안하다.

버그가 속출할 것 같고..

마치 그냥 C로 코딩하는 기분이랄까..

 

typescript를 적용하자.

 

참고문서

https://www.c-sharpcorner.com/blogs/type-script-with-blazor

https://docs.microsoft.com/en-us/visualstudio/javascript/compile-typescript-code-nuget?view=vs-2022 

 

가장 먼저 Microsoft.Typescript.MSBuild 를 설치한다.

설치가 잘 안됐다. 뭔가 뒤에서 하는데 csproj 파일엔 반영이 안되는 느낌..

MS 문서를 보고 그냥 csproj 파일을 손으로 고쳤다.

TypeScript 버전을 적고, Package에 추가했다. 자세한 것은 나중에 공부하기로..

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <TypeScriptToolsVersion>4.6</TypeScriptToolsVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components" Version="6.0.2" />
    <PackageReference Include="Microsoft.JSInterop" Version="6.0.2" />
    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.6.2">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </PackageReference>
  </ItemGroup>

</Project>

 

tsconfig.json 생성

그냥 새 파일 만들기해서 만들었다.

tsconfig에는 ts -> js 변환 관련된 설정들이 들어있다.

역시 MS 문서를 보고 만들었다.

중간에 target만 "ES2022"로 바꿨다.

{
  "compileOnSave":  true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES2022",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}

 

scripts폴더 안에 ts 파일 생성

scripts
  - kakaomap.ts

 

Build !

wwwroot/js 폴더 안에 kakaomap.js와 kakaomap.js.map 파일이 생성되었다.

BlazorKakaoMap  (project)
  /script
    - kakaomap.ts
  /wwwroot
    /js
      - kakaomap.js
      - kakaomap.js.map
  - KakaoMapComponent.razor
  - KakaoMapComponent.razor.cs
  ...

 

결국 필요한 것은 kakaomap.js 이다.

C#코드에선 아래 처럼 불러올 수 있다.

var path = "./_content/BlazorKakaoMap/js/kakaomap.js";
var module = await JS.InvokeAsync<IJSObjectReference>("import", path);

 

 

끝!