如何将 WebAssembly 函数导入 TypeScript？

Question

我有一个用 TypeScript 编写的现有项目，我正在尝试导入 WebAssembly 模块来替换某些功能。

我通过提取将 .wasm 加载到 .js 文件的逻辑，成功导入了 WebAssembly 模块。这是它自己的 TypeScript 模块，并导入到我想要使用 WebAssembly 函数的 .ts 文件中。

为了演示目的，我在 wasm 中做了一个简单的添加函数。

在使用 AssemblyScript 编译为 .wasm 的 .ts 中：

export function add(a: i32, b: i32): i32 {
  return a + b;
}

在 .js 文件中：

export async function loadWasm() {
  const imports = {}; // Omitted the contents since it's most likely irrelevant
  const module = await 
  WebAssembly.instantiateStreaming(fetch('path/to/file.wasm'),imports);
  return module;
}

在我想使用 WebAssembly 的 .ts 文件中：

export async function loadWasm() {
  const imports = {}; // Omitted the contents since it's most likely irrelevant
  const module = await 
  WebAssembly.instantiateStreaming(fetch('path/to/file.wasm'),imports);
  return module;
}

但是当运行它时，它给我以下错误：

Uncaught (in promise) TypeError: addFunc is not a function at eval

有谁知道是什么原因造成的？

Answer 1

试试这个片段：

loadWasm().then(module => {
  const { add: addFunc } = module.instance.exports;
  console.log(addFunc(2, 5));
});