面试题：TypeScript 中如何实现与 WebAssembly 简单数据类型的交互

Question

在 TypeScript 项目中，假设 WebAssembly 模块导出了一个接受整数并返回整数的函数。请描述如何在 TypeScript 中导入并调用这个 WebAssembly 函数，并且确保数据类型的正确传递和接收。

Answer 1

1. 加载 WebAssembly 模块：
   • 首先，使用 fetch 方法获取 .wasm 文件的二进制内容。
   • 然后，调用 WebAssembly.instantiateStreaming 方法将二进制内容实例化。例如：

async function loadWasm() {
    const response = await fetch('yourModule.wasm');
    const instance = await WebAssembly.instantiateStreaming(response);
    return instance;
}

2. 导入并调用函数：
   • 假设 WebAssembly 模块导出的函数名为 exportedFunction。
   • 实例化完成后，从实例的 exports 对象中获取该函数。
   • 调用函数并确保传递正确的整数类型，接收返回的整数类型。例如：

async function main() {
    const wasmInstance = await loadWasm();
    const exportedFunction: (num: number) => number = wasmInstance.instance.exports.exportedFunction as (num: number) => number;
    const input: number = 42;
    const result: number = exportedFunction(input);
    console.log(`Result: ${result}`);
}
main();

在这个过程中，TypeScript 会根据类型注解确保 input 是 number 类型（在 WebAssembly 中对应整数），并且 result 也是 number 类型（对应 WebAssembly 返回的整数）。同时，通过 as 断言将从 exports 获取的函数转换为期望的类型。