是否可以将导出的 JavaScript 模块类导入为 Blazor 中的互操作类？

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/浏览器中导出类，然后通过互操作将它们导入到 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);
        }
}