Convert JSInterop's ExampleJsInterop JavaScript code to TypeScript

user_1865791 0
Viewed 899

I'm new to .NetCore Blazor and trying to convert ExampleJsInterop JavaScript code to TypeScript. I have a problem with converting the code below:

window.exampleJsFunctions = {
  showPrompt: function (text) {
    return prompt(text, 'Type your name here');
  },
  displayWelcome: function (welcomeMessage) {
    document.getElementById('welcome').innerText = welcomeMessage;
  },
  returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        data.push(4);
          console.log(data);
    });
  },
  sayHello: function (dotnetHelper) {
    return dotnetHelper.invokeMethodAsync('SayHello')
      .then(r => console.log(r));
  }
};

Well, of course, there is no problem to convert the first two functions and the last one, but I can not convert the 3rd function since the DotNet is not valid on TypeScript:

returnArrayAsyncJs: function () {
    DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
      .then(data => {
        data.push(4);
          console.log(data);
    });
  }

My question is first of all, how can I convert this JS function to TS. and also that would be helpful if someone helps me to understand where this DotNet comes from.

Thanks in advance.

typescript blazor asp.net-core javascript
2 Answers

where this DotNet comes from

Generally speaking, DotNetcomes from the JSInterop/Microsoft.JSInterop.JS single file (See Source Code on GitHub). This file is imported in the blazor.server.js. And you'll reference this blazor.server.js script in your Pages/_Host.csthml:

<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script src="_framework/blazor.server.js"></script>
    <script src="/built/exampleJsInterop.js" ></script>
</body>
</html>

When the blazor.server.js is loaded at runtime , a global DotNet is created.

You can search the string window.DotNet= in the blazor.server.js to confirm. Since the DotNet is attached as a property of window, it becomes a global variable in your browser.

how can I convert this JS function to TS.

Microsoft has not yet released an official .d.ts package for the Microsoft.JsInterop library. See https://github.com/aspnet/Blazor/issues/1452

There's a https://www.npmjs.com/package/@dotnet/jsinterop on the npmjs.com. But be careful as it seems NOT an official release (Not Sure).

One safe way, as suggested by @SteveSandersonMS in above links, is to generate the d.ts by our own:

  1. Copy the file and save it as Microsoft.JsInterop.ts: https://github.com/aspnet/Extensions/blob/master/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts
  2. Run tsc --declaration and get the Microsoft.JsInterop.d.ts file, save it in the path wwwroot/@types/Microsoft.JsInterop.d.ts.

  3. Within your exampleJsInterop.ts file, let's say its path is wwwroot/ts/exampleJsInterop.ts, just add a declaration reference /// <reference types="../@types/Microsoft.JsInterop" /> at the first line:

    └───wwwroot/
    ├───@types/
    |   |─── Microsoft.JsInterop.d.ts
    ├───built/
    └───ts/
        |─── exampleJsInterop.ts

    Now you can enjoy the typescript features from the DotNet module. See intellisense: intellisense

    By the way, I also change the data => {data.push(4);... } to (data: Number[])=> {... }

user_100916070

There is a simpler way, just write in ts:

(window as any).DotNet.invokeMethodAsync('some', 'some');
user_57410440
Related