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

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');
}

这很有趣。但是，我想做的是 use classes instead .我在我搜索过的任何链接中都没有看到任何对此的引用，我发现最接近的 StackOverflow 问题是 this one .

是否可以在 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);
        }
}