使用 IJSObjectReference 在 blazor 中调用从 typescript 生成的 js

Question

您好，我有一个关于使用 Blazor 和 typescript 的问题。

我的打字稿：

namespace JSInteropWithTypeScript {

    export class Generator {
        public showAlert(): void {
            alert("INTEROP");
        }
    }

    export function Load(): void {
        window['generator'] = new Generator();
    }
}

JSInteropWithTypeScript.Load();

这里是生成的JS：

var JSInteropWithTypeScript;
(function (JSInteropWithTypeScript) {
    var Generator = /** @class */ (function () {
        function Generator() {
        }
        Generator.prototype.showAlert = function () {
            alert("INTEROP");
        };
        return Generator;
    }());
    JSInteropWithTypeScript.Generator = Generator;
    function Load() {
        window['generator'] = new Generator();
    }
    JSInteropWithTypeScript.Load = Load;
})(JSInteropWithTypeScript || (JSInteropWithTypeScript = {}));
JSInteropWithTypeScript.Load();
//# sourceMappingURL=generator.js.map

接下来我想调用编译后的 js 脚本，所以我有一个带按钮的简单组件：

@namespace Components.Reports.Components.Generator
@inherits ControlsBase

<button class="btn btn-success" @onclick="ShowAlert"> BUTON </button>

在这个组件的基类中，我想延迟加载（所以我不需要在 _Host 中添加每个脚本，只需在需要时使用它们）这个脚本文件并调用这个函数，所以我做了这个装置：

public class ControlsBase : ComponentBase, IAsyncDisposable
{
    private readonly Lazy<Task<IJSObjectReference>> moduleTask;

    [Inject]
    protected IJSRuntime JsRuntime { get; set; }
    
    public ControlsBase()
    {
        Task<IJSObjectReference> jsInvokes() => this.JsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Components/js/generator.js").AsTask();
        this. moduleTask = new Lazy<Task<IJSObjectReference>>(jsInvokes);
    }

    public async Task ShowAlert()
    {
        try
        {
            var module = await moduleTask.Value;
            await module.InvokeVoidAsync("showAlert");
        }
        catch (JSException jsException)
        {
            logger.Error($"Problem with js interop {jsException}");
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (moduleTask.IsValueCreated)
        {
            var module = await moduleTask.Value;
            await module.DisposeAsync();
        }
    }
}

所以现在我想调用它，我的问题/问题是当我调用编译后的 js 脚本时

找不到“showAlert”（“showAlert”未定义）。

当我使用原版代码时：

export function showAlert() {
  alert("INTEROP");
}

它有效。

那么我在打字稿方面做错了什么？

编辑

使用@Haytam 指南，我将我的 ts 重新制作为简单：

namespace JSInteropWithTypeScript {
    export class Generator {
        public ShowAlert(): void {
            alert("INTEROP");
        }
    }
}

function showAlert(): void {
    let generator = new JSInteropWithTypeScript.Generator();
    generator.ShowAlert();
}

然后编译成js：

var JSInteropWithTypeScript;
(function (JSInteropWithTypeScript) {
    var Generator = /** @class */ (function () {
        function Generator() {
        }
        Generator.prototype.ShowAlert = function () {
            alert("INTEROP");
        };
        return Generator;
    }());
    JSInteropWithTypeScript.Generator = Generator;
})(JSInteropWithTypeScript || (JSInteropWithTypeScript = {}));
function showAlert() {
    var generator = new JSInteropWithTypeScript.Generator();
    generator.ShowAlert();
}

但要正常工作，我需要在 js 中的函数之前手动添加导出。我知道导致此错误的原因是 TypeScript 默认情况下会生成 JavaScript 代码，该代码旨在通过各种迎合导出的包管理器使用和模块。此类工具通常是 Node.js 或 WebPack。我可以使用 tsconfig 将其关闭：

{
  "compilerOptions": {
    "module": "none"
   }
}

但仍然只有当函数在 js 中标记为导出时，js 互操作才有效。任何想法如何处理？

EDIT2：

我认为问题在于延迟加载，将生成的 js 脚本添加为静态资源：

 <script src="_content/Components/js/generator.js"></script>

和使用的代码：

    public async Task OnClick()
    {
        try
        {
            await this.JsRuntime.InvokeVoidAsync("showAlert");
        }
        catch (JSException jsException)
        {
            logger.Error($"Problem with js interop {jsException}");
        }
    }

在我的组件库中，它还活着，但仍然只是出于好奇，我想让这个延迟加载。任何建议将不胜感激。

Answer 1

我在这里看到两个问题：

1. Blazor JS 隔离适用于 JavaScript Modules。不再需要将函数放入window，这就是他们首先添加此隔离的原因。
2. 由于 Blazor JS Isolation 与 JS 模块一起使用，因此它需要直接导出函数。我相信无论你怎么尝试，使用 TS 类生成的 JS 都行不通。

我认为你应该尝试直接导出函数。

编辑

根据您的最新编辑，这不起作用吗？

export function showAlert(): void {
    let generator = new JSInteropWithTypeScript.Generator();
    generator.ShowAlert();
}