C# 使用IJSObjectReference调用blazor中的typescript生成的js

嗨，我有一个关于使用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>

它起作用了

那么，我的打字脚本有什么错呢

编辑

使用@Haytam guide，我将我的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中手动添加export-before函数。我知道导致此错误的原因是，默认情况下，TypeScript生成JavaScript代码，该代码是为通过各种适合导出和模块的包管理器使用而设计的。这些工具通常是Node.js或WebPack。我可以使用tsconfig将其关闭：

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

但js互操作仍然只有在js中将函数标记为导出时才起作用。你知道怎么处理吗

EDIT2:

我认为问题在于延迟提交，添加了生成的js脚本作为静态资源：

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

---

在我的组件库中，它是活动的，但仍然只是出于好奇，我想使n这个惰性加载。任何建议都将不胜感激。

我在这里看到两个问题：

Blazor JS隔离可以使用。将函数放入

窗口

不再是必需的，这就是为什么他们首先添加了这种隔离

由于Blazor JS隔离与JS模块一起工作，因此它希望直接导出函数。我相信无论您尝试什么，使用TS类生成的JS都不会起作用

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

编辑

根据你最近的编辑，这不管用吗

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

---

你能从TS中发布生成的JS吗？当然，谢谢你的回答，我删除了load语句并将函数show alert移到了类和命名空间之外，但我需要在编译的JS中手动添加导出，blazor没有看到该函数，当我在TS中添加它时，我得到的导出未定义异常。我将更新我的问题以了解更多细节。@WojciechSzabowicz对我的答案进行了编辑，我相信你也可以在TS中使用

export

关键字不？在我的情况下不可以（但我没有使用npm，因为我写下了我发现的所有信息，告诉你关闭导出或初始化npm），当我在TS中添加export-before函数时，在js中，导出类似于：exports.showarter=showarert；调用它会抛出一个异常。@WojciechSzabowicz您曾经设法解决过导出异常吗？“我自己也遇到过这个问题。”安德鲁，哦，忘了这个问题。如果我没记错的话，在_Host.cshtml中我改为

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

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