如何在 Blazor 组件中实现 TypeScript 隔离？答案

【问题标题】：How to implement TypeScript Isolation in Blazor Components?如何在 Blazor 组件中实现 TypeScript 隔离？
【发布时间】：2021-02-23 08:36:27
【问题描述】：

我知道如何实现JavaScript isolation in Blazor components。

// Use the module syntax to export the function
export function sayHi(name) {
    alert(`hello ${name}!`);
}

和

private Task<IJSObjectReference> _module;
private Task<IJSObjectReference> Module => _module ??= JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/demo.js").AsTask();

async Task Submit()
{
    var module = await Module;
    await module.InvokeVoidAsync("sayHi", name);
}

但是如何在 Blazor 组件中实现隔离的 TypeScript 连接以调用 TypeScript 文件中定义的“sayHi”函数？

问题是，如果我从 TypeScript 模块导出函数，如下所示：

export function sayHi(name) {
    alert(`hello ${name}!`);
}

然后编译成下面没有“export”的javascript：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.sayHi = void 0;
function sayHi(name) {
    alert("hello " + name + "!");
}
exports.sayHi = sayHi;
//# sourceMappingURL=say.js.map

这就是我有这个问题的原因。如何在 Blazor 组件中实现隔离的 TypeScript 连接以调用 TypeScript 文件中定义的“sayHi”函数？

答案：将 compilerOptions 中的模块设置为 ES2015 或 ESNext

【问题讨论】：

去掉包装模块，为什么需要它？ typescriptlang.org/play?#code/…
@AlekseyL.，谢谢你的回答，但我究竟如何在 Blazor 框架上做到这一点？如何在项目中准确配置编译以使生成的 JavaScript 保持“导出”状态？
将compilerOptions中的module设置为ES2015或ESNext
你解决过这个问题吗？我有完全相同的问题。编译后的 TS 中的“export”被省略，然后我的 WASM 代码看不到要调用的 JS 函数。
@elyl，是的。请参阅上一条评论。

标签： typescript blazor-client-side blazor-webassembly isolation

【解决方案1】：

将compilerOptions 中的module 设置为ES2015 或ESNext – Aleksey L.

【讨论】：