Konvertera JSInterop:s ExampleJsInterop JavaScript-kod till TypeScript

Jag är ny på .NetCore Blazor och försöker konvertera ExampleJsInterop JavaScript-kod till TypeScript. Jag har ett problem med att konvertera koden nedan:

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));
  }
};

Tja, självklart är det inget problem att konvertera de första två funktionerna och den sista, men jag kan inte konvertera den tredje funktionen eftersom DotNet inte är giltig i TypeScript:

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

Min fråga är först och främst, hur kan jag konvertera denna JS-funktion till TS. och det skulle också vara hjälpsamt om någon hjälper mig att förstå var detta DotNet kommer ifrån.

Tack i förväg.

Svar #1

var det här DotNet kommer ifrån

Generellt sett kommer DotNet från filen JSInterop/Microsoft.JSInterop.JS (Se källkod på GitHub). Denna fil importeras i blazor.server.js. Och du kommer att referera till detta blazor.server.js-skript i din 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>

När blazor.server.js laddas vid körning skapas ett globalt DotNet.

Du kan söka efter strängen window.DotNet= i blazor.server.js för att bekräfta. Eftersom DotNet är knutet som en egenskap till window, blir det en global variabel i din webbläsare.

hur kan jag konvertera denna JS-funktion till TS.

Microsoft har ännu inte släppt ett officiellt .d.ts-paket för Microsoft.JsInterop-biblioteket. Se https://github.com/aspnet/Blazor/issues/1452

Det finns en https://www.npmjs.com/package/@dotnet/jsinterop på npmjs.com. Men var försiktig eftersom det verkar INTE vara en officiell release (Inte Säker).

Ett säkert sätt, som föreslagits av @SteveSandersonMS i ovanstående länkar, är att generera d.ts själva:

  1. Kopiera filen och spara den som Microsoft.JsInterop.ts: https://github.com/aspnet/Extensions/blob/master/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts
  2. Kör tsc --declaration och få filen Microsoft.JsInterop.d.ts, spara den i sökvägen wwwroot/@types/Microsoft.JsInterop.d.ts.

  3. I din exampleJsInterop.ts-fil, låt oss säga att dess sökväg är wwwroot/ts/exampleJsInterop.ts, lägg bara till en deklarationsreferens /// <reference types="../@types/Microsoft.JsInterop" /> på första raden:

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

    Nu kan du njuta av TypeScript-funktionerna från DotNet-modulen. Se intellisense:

    Förresten ändrar jag också data => {data.push(4);... } till (data: Number[])=> {... }

Svar #2

Det finns ett enklare sätt, skriv bara i ts:

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

Relaterade artiklar