ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Blazor에서 typescript 사용하기
    HelloJkw 개발 2022. 3. 4. 18:02

    당연하겠지만 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);

     

     

    끝!

    댓글 0

Designed by Tistory.