Блог

Главная - Вопросы по программированию - Как обернуть библиотеку IIFE в компонент vue3?

Как обернуть библиотеку IIFE в компонент vue3?

#typescript #vue.js #vue-component #chessboard.js

Вопрос:

Я пытаюсь завернуть chessboardjs библиотеку в компонент машинописного текста Vue3. chessboardjs есть файл типизаций, и IntelliSense моего редактора показывает, что он напрямую импортирует типизацию. Библиотека экспортирует функцию 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>

Этот код компилируется, но завершается сбоем во время выполнения на подключенном крюке()
с сообщением

Не пойманный (в обещании) Ошибка типа: Объект(…) не является функцией

Я также попытался использовать this.board = ChessBoard("board", "start"); в mounted() крючке вместо вышеперечисленного, но это не удалось скомпилировать, с сообщением:

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

Может кто-нибудь, пожалуйста, помочь мне понять, что здесь происходит, и/или предложить лучший подход?

Комментарии:

1. верните новый (класс { — зачем вам это нужно? Я также пробовал использовать this.board = шахматная доска(«доска», «старт»); в смонтированном() крючке вместо вышеуказанного, — вы уже делаете это в приведенном выше коде, пожалуйста, уточните, какая ошибка возникает в каком случае.

2. return new (class { Конструкция позволяет мне указать тип board — я копирую пример, где это было сделано, но, возможно, есть лучший способ?

3. @Колба Эстуса … и вторая попытка должна была включать ключевое new слово — мой плохой. Таким образом, предложение должно гласить this.board = new ChessBoard("board", "start"); , что приводит к указанной ошибке 'new' expression... .

4. board тип может быть просто указан с помощью утверждения типа, иначе, TS, не требуется писать поддельный new class { код. data является устаревшим API Vue 2. Придерживайтесь setup для нового кода, дружественного к TS. Из того, что я вижу, ChessBoard предполагается, что он будет использоваться без new . npmjs.com/package/chessboardjs является фиктивным пакетом, если вы используете его именно тогда, проблема в том, что вы установили не тот пакет.

Метки: