Преобразовать код JavaScript JSInterop ExampleJsInterop в TypeScript - PullRequest
2 голосов
/ 16 октября 2019

Я новичок в .NetCore Blazor и пытаюсь преобразовать код ExampleJsInterop JavaScript в TypeScript. У меня есть проблема с преобразованием кода ниже:

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

Ну, конечно, нет проблем с преобразованием первых двух функций и последней, но я не могу преобразовать третью функцию, так как DotNet недопустимо для TypeScript:

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

Мой вопрос в первую очередь, как я могу преобразовать эту JS функцию в TS. а также было бы полезно, если бы кто-то помог мне понять, откуда взялась эта DotNet.

Заранее спасибо.

1 Ответ

2 голосов
/ 17 октября 2019

откуда взята эта DotNet

Вообще говоря, DotNet происходит из одного файла JSInterop/Microsoft.JSInterop.JS (см. Исходный код на GitHub ). Этот файл импортируется в blazor.server.js. И вы будете ссылаться на этот blazor.server.js скрипт в вашем 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>

Когда blazor.server.js загружается во время выполнения, создается глобальный DotNet.

Youможно найти строку window.DotNet= в blazor.server.js для подтверждения. Поскольку DotNet присоединен как свойство window, он становится глобальной переменной в вашем браузере.

как я могу преобразовать эту функцию JS в TS.

Microsoft еще не выпустила официальный пакет .d.ts для библиотеки Microsoft.JsInterop. См. https://github.com/aspnet/Blazor/issues/1452

На npmjs.com есть https://www.npmjs.com/package/@dotnet/jsinterop. Но будьте осторожны, так как НЕ является официальным релизом (не уверен).

Один из безопасных способов, предложенных @ SteveSandersonMS в вышеприведенных ссылках , - создать d.ts по нашей собственной команде:

  1. Скопируйте файл и сохранитеэто как Microsoft.JsInterop.ts: https://github.com/aspnet/Extensions/blob/master/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts
  2. Запустите tsc --declaration и получите файл Microsoft.JsInterop.d.ts, сохраните его в пути wwwroot/@types/Microsoft.JsInterop.d.ts.
  3. В пределах вашего exampleJsInterop.tsфайл, скажем, его путь wwwroot/ts/exampleJsInterop.ts, просто добавьте ссылку объявления /// <reference types="../@types/Microsoft.JsInterop" /> в первой строке:

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

    Теперь вы можете пользоваться функциями машинописи из модуля DotNet. См. Intellisense: intellisense

    Кстати, я также изменяю data => {data.push(4);... } на (data: Number[])=> {... }

...