Import JS web assembly into TypeScript

Question

I'm trying to use wasm-clingo in my TypeScript React project. I tried to write my own d.ts file for the project:

// wasm-clingo.d.ts
declare module 'wasm-clingo' {
  export const Module: any;
}

and import like this:

import { Module } from 'wasm-clingo';

but when I console.log(Module) it says undefined. What did I do wrong?

Notes:

clingo.js is the main js file.
index.html and index_amd.html are two example pages

Solution:

I solved the problem like this:

// wasm-clingo.d.ts
declare module 'wasm-clingo' {
  const Clingo: (Module: any) => Promise<any>;
  namespace Clingo {}
  export = Clingo;
}

and

import * as Clingo from 'wasm-clingo';

Here's the source for this solution

A TypeScript declaration file .d.ts only declares types -- it doesn't actually export anything. Can you try import Module from 'wasm-clingo'? — Explosion Pills
– Explosion Pills, Commented May 27, 2018 at 2:00

see sharper · Accepted Answer · 2019-09-05 04:57:52Z

5

I know you found a solution acceptable to you; however, you don't really have any types here, you just have Module declared as any, which gives you no typescript benefits at all. In a similar situation I used @types/emscripten, which provides full type definitions for web assembly modules compiled using emscripten. You simply need to do:

npm install --save-dev @types/emscripten

then change your tsconfig.json types array to add an entry for emscripten. After that you can just write Module.ccall(...) etc. If you like you could of course write const Clingo = Module and then make calls against that if you want a more descriptive name than Module (which is a terrible name!).

You're welcome ;)

answered Sep 5, 2019 at 4:57

see sharper

12.2k8 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codie Over a year ago

Can you maybe give an example please. Also how does one wrap classes?

Ted Brownlow Over a year ago

Classes are kind of weird because they live on the module object. You'll probably have to use class expressions.

dominik · Accepted Answer · 2018-05-27 02:07:07Z

0

I think the issue is that wasm-clingo exports the module itself but import { Module } from 'wasm-clingo' expects a property.

Try

import Clingo_ from 'wasm-clingo';
const Clingo: typeof Clingo_ = (Clingo_ as any).default || Clingo_;

answered May 27, 2018 at 2:07

dominik

5,9306 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Import JS web assembly into TypeScript

Solution:

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Solution:

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related