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文件中：

loadWasm().then((module: any) => {
  let addFunc: ((a: number, b: number) => any) = module.add;
  console.log('Adding 2 and 5 in Wasm: ' + addFunc(2, 5));
});

但是运行此命令时会出现以下错误：

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

Full example in WebAssembly Studio

Answer 2

这是一种使用AssemblyScript Loader的方法，您可以直接在TypeScript中使用它：

它需要“ regenerator-runtime”：“ ^ 0.13.2” ，您可以将其与加载程序一起导入到要使用Wasm模块的.ts文件中，例如：< / p>

import { instantiateStreaming, ASUtil } from 'assemblyscript/lib/loader';
import { regeneratorRuntime } from 'regenerator-runtime';

我已经这样实例化了它：

interface MyApi {
    add(a: number, b: number): number;
}

async function getWasm(): Promise<ASUtil & MyApi> {
    const imports: any = {};
    let module: ASUtil & MyApi = await instantiateStreaming<MyApi>(fetch('path/to/file.wasm'), imports);
    return module;
}

之后，您可以简单地：

getWasm().then((module) => {
    console.log('The result is: ', module.add(3, 4));
});

以及使用Loader提供的任何其他功能：

let str = "Hello World!";
let ref = module.__retain(module.__allocString(str));
console.log(module.__getString(ref));

如何将WebAssembly函数导入TypeScript？

2 个答案: