1

I know how to implement JavaScript isolation in Blazor components.

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

And

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

But how do I implement an isolated TypeScript connection in the Blazor components to call the "sayHi" function defined in the TypeScript file?

The problem is that if I export a function from a TypeScript module, like this:

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

Then it is compiled to the following javascript, which does not have " export":

"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

That's why I have this question. How do I implement an isolated TypeScript connection in the Blazor components to call the "sayHi" function defined in the TypeScript file?

Answer: Set module in compilerOptions to ES2015 or ESNext enter image description here

Mentor
  • 3,058
  • 1
  • 22
  • 27
  • 1
    Remove the wrapping module, why do you need it? https://www.typescriptlang.org/play?#code/FAUwHgDg9gTgLgAgGYFcB2BjOBLKaEDOAhgJ4AS2AFGkQLYgCUCA3sAuwkQDYjyUAGACxBcuUBABJmNegF8AhPwYBuYLKA – Aleksey L. Nov 11 '20 at 11:32
  • @AlekseyL., thank you for the answer, but how exactly do I do this on the Blazor framework? How exactly can I configure compilation in a project so that the resulting JavaScript remains "export"? – Mentor Nov 11 '20 at 11:43
  • 2
    Set `module` in `compilerOptions` to `ES2015` or `ESNext` – Aleksey L. Nov 11 '20 at 11:53
  • Did you ever resolve this? I am having the exact same issue. "export" in compiled TS gets omitted, and my WASM code can't then see the JS function to call. – elyl Dec 08 '20 at 17:35
  • @elyl, yes.See the previous comment. – Mentor Dec 09 '20 at 18:31

1 Answers1

1

Set module in compilerOptions to ES2015 or ESNext – Aleksey L.

Mentor
  • 3,058
  • 1
  • 22
  • 27