Как импортировать функции WebAssembly в TypeScript? - PullRequest
Новая
       13

Как импортировать функции WebAssembly в TypeScript?

2 голосов
/ 18 июня 2019

У меня есть проект, написанный на TypeScript, и я пытаюсь импортировать модуль WebAssembly, чтобы заменить некоторые функции.

Мне удалось успешно импортировать модуль WebAssembly, извлекая логику для загрузки .wasm в файл .js. Это собственный модуль TypeScript, который импортируется в файл .ts, где я хочу использовать функции WebAssembly.

Для демонстрации я сделал простую функцию добавления в wasm.

В .ts, скомпилированном в .wasm с AssemblyScript: 

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

И в файле .ts, где я хочу использовать WebAssembly: 

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

Кто-нибудь вызывает это?

Ответы [ 2 ]

2 голосов
/ 18 июня 2019

Вот метод с использованием AssemblyScript Loader, который вы можете использовать непосредственно в TypeScript:

Требуется «регенератор-время выполнения»: «^ 0.13.2» , который можно импортировать вместе сзагрузчик в файле .ts, где вы хотите использовать модуль Wasm, например: 

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

А также используйте любые дополнительные функции, которые предоставляет Загрузчик: 

let str = "Hello World!";
let ref = module.__retain(module.__allocString(str));
console.log(module.__getString(ref));
2 голосов
/ 18 июня 2019

Попробуйте этот фрагмент: 

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

Полный пример в WebAssembly Studio

...