将JSInterop的ExampleJsInterop JavaScript代码转换为TypeScript

Question

我是

.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

来自哪里，那也会很有帮助。

提前致谢。

Answer 1

这个 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

。

您可以在

window.DotNet=

中搜索字符串

blazor.server.js

进行确认。由于

DotNet

作为

window

的属性附加，因此它成为浏览器中的 global 变量。

如何将这个 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

：

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
```
 模块中的 TypeScript 功能。请参阅智能感知：
```
顺便我也把
data => {data.push(4);... }
```
改成
```
(data: Number[])=> {... }

Answer 2

还有更简单的方法，直接写在ts中即可：

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

Answer 3

如果我错了，请纠正我，但看起来微软已经发布了官方的 npm 包：

https://www.npmjs.com/package/@microsoft/dotnet-js-interop

安装该包允许我使用 Typescript 中的

DotNetObject

。

将JSInterop的ExampleJsInterop JavaScript代码转换为TypeScript

问题描述投票：0回答：3

3个回答

最新问题

将JSInterop的ExampleJsInterop JavaScript代码转换为TypeScript

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3