将 JS Web 程序集导入 TypeScript

Question

我正在尝试在我的 TypeScript React 项目中使用 wasm-clingo。我尝试为该项目编写自己的d.ts 文件：

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

并像这样导入：

import { Module } from 'wasm-clingo';

但是当我console.log(Module) 时，它会显示undefined。我做错了什么？

注意事项：

• clingo.js是主js文件。
• index.html 和 index_amd.html 是两个示例页面

解决方案：

我解决了这样的问题：

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

和

import * as Clingo from 'wasm-clingo';

Here's the source for this solution

Answer 1

我知道您找到了您可以接受的解决方案；但是，您实际上并没有任何类型，您只是将Module 声明为any，这根本没有给您带来任何打字稿好处。在类似的情况下，我使用了@types/emscripten，它为使用 emscripten 编译的 Web 汇编模块提供了完整的类型定义。你只需要这样做：

npm install --save-dev @types/emscripten

然后更改您的tsconfig.json types 数组以添加emscripten 的条目。 之后，您可以写Module.ccall(...) 等。如果您愿意，当然可以写const Clingo = Module，然后如果您想要一个比Module 更具描述性的名称（这是一个可怕的名称！），请致电反对。

不客气；）

Answer 2

我认为问题在于 wasm-clingo 导出模块本身，但 import { Module } from 'wasm-clingo' 需要一个属性。

试试

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