Question

我是// trigger this.$root.$emit('my-event'); // listen this.$root.$on('my-event');的新手，正在尝试将ExampleJsInterop .NetCore Blazor代码转换为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)); } };在TypeScript上无效：

DotNet

首先，我的问题是如何将该returnArrayAsyncJs: function () { DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync') .then(data => { data.push(4); console.log(data); }); }函数转换为JS。如果有人帮助我了解这个TS的来源，那也会很有帮助。

谢谢。

Answer 1

此DotNet的来源

通常来说，DotNet来自JSInterop/Microsoft.JSInterop.JS单个文件（请参阅Source Code on 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的属性，因此它在您的浏览器中成为全局变量。

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

Microsoft尚未发布.d.ts库的官方Microsoft.JsInterop软件包。参见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[])=> {... }

Answer 2

有一种更简单的方法，只需在ts中编写：

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

将JSInterop的ExampleJsInterop JavaScript代码转换为TypeScript

2 个答案: