I’m trying to get familiar with Blazor/Typescript interop.

This code fails and I can’t understand why:

@page "/TSTest"

@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

<h1>Typescript test</h1>

<button @onclick=LoadTS>Load TS (JS) file</button>
<button @onclick=CallTS>Call TS Init</button>


@code
{
   IJSObjectReference tsMod = null;

   async void LoadTS()
   {
      if (tsMod == null)
         // This line *definitely* loads the file in. You can see it in Chrome's sources tab after this line has executed but not before.
         tsMod = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/TS/TSTest.js");
   }


   async void CallTS()
   {
      try
      {
         await tsMod.InvokeVoidAsync("TSInit");
      }
      catch (Exception e)
      {
         System.Console.WriteLine(e.Message);
      }

      try
      {
         await JSRuntime.InvokeVoidAsync("TSInit");
      }
      catch (Exception e)
      {
         System.Console.WriteLine(e.Message);
      }
   }


   async ValueTask IAsyncDisposable.DisposeAsync()
   {
      if (tsMod != null)
      {
         await tsMod.DisposeAsync();
         tsMod = null;
      }
   }
}

I get the following error for both attempts:

Could not find ‘TSInit’ (‘TSInit’ was undefined). Error: Could not
find ‘TSInit’ (‘TSInit’ was undefined).
at http://192.168.0.12:5212/_framework/blazor.webassembly.js:1:368

The file is loaded and the function is there. So what am I missing?

TSTest.ts:

async function TSInit() {
   alert("Hi Dude. Here's my Typescript file.");
}

TSTest.js:

async function TSInit() {
    alert("Hi Dude. Here's my Typescript file.");
}
//# sourceMappingURL=TSTest.js.map

I should add this worked fine for a vanilla JS file.