如何将 IIFE 库包装为 vue3 组件？

问题描述

我正在尝试将 chessboardjs 库包装在 Vue3 Typescript 组件中。 chessboardjs 有一个打字文件，我的编辑器的智能感知显示它正确地导入了打字文件。该库导出一个函数 ChessBoard()，它看起来像 ChessBoardInstance 的构造函数/工厂； @types/chessboardjs/index.d.ts 声明如下：

export interface ChessBoardFactory {
    (containerElOrId: any,config?: BoardConfig): ChessBoardInstance;
    (containerElOrId: any,position: string | BoardPositionType): ChessBoardInstance;
    fenToObj(fen: string): boolean | BoardPositionType;
    objToFen(obj: BoardPositionType): boolean | string;
}

export const ChessBoard: ChessBoardFactory;

（省略其他声明）。

我的组件代码（仅脚本部分）如下所示：

<script lang="ts">
import { ChessBoard,ChessBoardInstance } from "chessboardjs";
import { defineComponent } from "vue";

export default defineComponent({
  name: "ChessBoard",data() {
    return new (class {
      board: ChessBoardInstance | null = null;
    })();
  },mounted() {
    this.board = ChessBoard("board","start");
  },});
</script>

这段代码可以编译，但在运行时在 mount() 钩子上失败， 与消息

Uncaught (in promise) TypeError: Object(...) is not a function

我也尝试在 this.board = ChessBoard("board","start"); 钩子中使用 mounted() 而不是上面的，但是编译失败，并显示以下消息：

'new' expression,whose target lacks a construct signature,implicitly has an 'any' type VueDX/TS(7009)

有人可以帮助我了解这里发生了什么，和/或提出更好的方法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）