是否可以在Blazor中导入导出的JavaScript模块类作为Interop类

Question

在最新的Visual Studio 2019中为我的Blazor服务器端解决方案创建Razor类库时，我看到以下文件：

ExampleJsInterop.cs

public class ExampleJsInterop : IAsyncDisposable
{
private readonly Lazy<Task<IJSObjectReference>> moduleTask;
public ExampleJsInterop(IJSRuntime jsRuntime)
{
moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
"import", "./_content/MyNamespace/exampleJsInterop.js").AsTask());
}
public async ValueTask<string> Prompt(string message)
{
var module = await moduleTask.Value;
return await module.InvokeAsync<string>("showPrompt", message);
}
public async ValueTask DisposeAsync()
{
if (moduleTask.IsValueCreated)
{
var module = await moduleTask.Value;
await module.DisposeAsync();
}
}
}

exampleJsInterop.js

// This is a JavaScript module that is loaded on demand. It can export any number of
// functions, and may import other JavaScript modules if required.
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}

这很有趣。然而，我想做的是使用类。在我搜索过的任何链接中，我都没有看到任何对此的引用，我找到的最接近StackOverflow的问题就是这个。

是否可以在JavaScript/浏览器中导出类，然后通过interop将它们导入Blazor？如果是，如何？

Answer 1

我所做的是在wwwroot外部的文件夹中使用这样的TypeScript类(伪代码(，并在类库中设置tsconfig以编译到wwwroot：

class SizeHelpers {
public GetBoundingClientRect(element: HTMLElement): DOMRect {
return element.getBoundingClientRect();
}
}

然后使用这个导出它(在同一个文件中(：

export function getSizeHelpers(): SizeHelpers {
return new SizeHelpers();
}

然后在C#中，我按需导入这个文件，就像在服务中这样：

var helpersInstance = await helpersModule.InvokeAsync<IJSObjectReference>("getSizeHelpers");
Helpers = new Helpers(helpersInstance);

然后在C#中，我这样做是为了消耗函数：

public class SizeHelpers
{
private readonly IJSObjectReference _instance;
public SizeHelpers(IJSObjectReference instance)
{
_instance = instance;
}
public ValueTask<BoundingClientRectangle> GetBoundingClientRect(ElementReference element)
{
return _instance.InvokeAsync<BoundingClientRectangle>("GetBoundingClientRect", element);
}
}