将 JSInterop 的 ExampleJsInterop JavaScript 代码转换为 TypeScript答案

【问题标题】：Convert JSInterop's ExampleJsInterop JavaScript code to TypeScript将 JSInterop 的 ExampleJsInterop JavaScript 代码转换为 TypeScript
【发布时间】：2020-02-13 13:42:49
【问题描述】：

我是 .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 的来源，那也会很有帮助。

提前致谢。

【问题讨论】：

作弊方法：添加“declare var DotNet: any;”没有 ts 文件顶部的引号。否则，通常会找到明确类型的定义，但我不确定这些是否存在用于 blazor。

标签： javascript typescript asp.net-core blazor

【解决方案1】：

这个 DotNet 来自哪里

一般来说，DotNet来自JSInterop/Microsoft.JSInterop.JS单个文件（见Source Code on GitHub）。此文件导入到blazor.server.js。你会在你的Pages/_Host.csthml 中引用这个blazor.server.js 脚本：

<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。

您可以在blazor.server.js中搜索字符串window.DotNet=进行确认。由于DotNet 是作为window 的属性附加的，因此它成为浏览器中的全局变量。

如何将此 JS 函数转换为 TS。

Microsoft 尚未为 Microsoft.JsInterop 库发布官方的 .d.ts 包。见https://github.com/aspnet/Blazor/issues/1452

在 npmjs.com 上有一个 https://www.npmjs.com/package/@dotnet/jsinterop。但要小心，因为它似乎 不是官方版本（不确定）。

按照@SteveSandersonMS in above links 的建议，一种安全的方法是我们自己生成d.ts：

复制文件并保存为Microsoft.JsInterop.ts:https://github.com/aspnet/Extensions/blob/master/src/JSInterop/Microsoft.JSInterop.JS/src/src/Microsoft.JSInterop.ts
运行tsc --declaration，得到Microsoft.JsInterop.d.ts文件，保存在路径wwwroot/@types/Microsoft.JsInterop.d.ts中。
在您的exampleJsInterop.ts 文件中，假设它的路径是wwwroot/ts/exampleJsInterop.ts，只需在第一行添加声明引用/// <reference types="../@types/Microsoft.JsInterop" />：
```
└───wwwroot/
    ├───@types/
    |   |─── Microsoft.JsInterop.d.ts
    ├───built/
    └───ts/
        |─── exampleJsInterop.ts
```
现在您可以享受 DotNet 模块中的打字稿功能了。参见智能感知：

对了，我也把data => {data.push(4);... }改成(data: Number[])=> {... }

【讨论】：

虽然我的排名被某人降低了;)，这个答案是对我的问题的确切澄清，它有很大帮助。谢谢@itminus 的好回答！
@AminM 我不知道为什么有人投反对票。我认为这是“一个有用且清晰的问题”。所以我决定投票:)

【解决方案2】：

还有一种更简单的方法，在ts里写就行了：

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

【讨论】：