Неизвестный тип VueKonva с TypeScript

Недавно я настроил TypeScript для своего проекта Vue 2. Все работает, кроме моего плагина VueKonva — я получаю сообщение об ошибке ниже при запуске приложения.

Я пытался добавить "vue-konva", к types в tsconfig.json, но безуспешно. Создание файла vue-konva.d.js также не помогло. Может ли кто-нибудь помочь мне понять, что я делаю неправильно?

Failed to compile.

src/main.ts:8:3
TS2769: No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ VueKonva: PluginObject<{}> | PluginFunction<{}>; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.
      Object literal may only specify known properties, and 'VueKonva' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ VueKonva: PluginObject<{}> | PluginFunction<{}>; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.
      Object literal may only specify known properties, and 'VueKonva' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 6 more ..., ComponentOptionsMixin>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., ComponentOptionsMixin> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ VueKonva: PluginObject<{}> | PluginFunction<{}>; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., ComponentOptionsMixin>'.
      Object literal may only specify known properties, and 'VueKonva' does not exist in type 'ComponentOptions<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., ComponentOptionsMixin>'.
     6 |
     7 | new Vue({
  >  8 |   VueKonva,
       |   ^^^^^^^^
     9 |   render: h => h(App)
    10 | }).$mount("#app");
    11 |

main.ts

import Vue from "vue";
import App from "@/App.vue";
import VueKonva from 'vue-konva';

Vue.use(VueKonva);

new Vue({
  VueKonva,
  render: h => h(App)
}).$mount("#app");

tsconfig.js

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "allowJs": true,
    "baseUrl": ".",
    "types": [
      "vue-konva",
      "vuetify",
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Почему вы поместили VueKonva в свой экземпляр Vue? Вы уже сделали Vue.use(VueKonva);

Adri 31.03.2023 10:06

Спасибо! Я подтвердил, что Vue.use() является правильным подходом для плагина VueKonva, и удаление его из экземпляра Vue устранило ошибку.

Daniel Sposito 25.05.2023 03:03
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
0
2
88
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сообщение об ошибке правильно указывает на вашу проблему.

  >  8 |   VueKonva,
       |   ^^^^^^^^

Ознакомьтесь с документацией проекта о том, как использовать VueKonva.

import { createApp } from 'vue';
import App from './App.vue';
import VueKonva from 'vue-konva';

const app = createApp(App);
app.use(VueKonva);
app.mount('#app');

Вот рабочий пример для Vue v3

const { createApp } = Vue 

const app = createApp({
data() {
  return {
    configKonva: {
      width: 200,
      height: 200,
    },
    configCircle: {
      x: 100,
      y: 100,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4,
    }
  }
}});
app.use(VueKonva);
app.mount('#app');
<div id = "app">
  <v-stage ref = "stage" :config = "configKonva">
    <v-layer ref = "layer">
      <v-circle :config = "configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src = "https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<script src = "https://unpkg.com/[email protected]/konva.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src = "https://unpkg.com/[email protected]/umd/vue-konva.js"></script>

ОБНОВЛЯТЬ

  1. Vue v2 не имеет метода $mount.
  2. Не помещайте плагин в определение приложения

Ваш код

new Vue({
  // this is not necessary -> VueKonva,
  render: h => h(App)
}) // this is not necessary -> .$mount("#app");

Вот рабочий пример для Vue v2

Vue.use(VueKonva)

new Vue({
  el: '#app',
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200,
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      }
    }
  }
})
<div id = "app">
  <v-stage ref = "stage" :config = "configKonva">
    <v-layer ref = "layer">
      <v-circle :config = "configCircle"></v-circle>
    </v-layer>
  </v-stage>
</div>
<!--1. Link Vue Javascript & Konva-->
<script src = "https://unpkg.com/[email protected]/konva.min.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src = "https://unpkg.com/[email protected]/umd/vue-konva.js"></script>

Привет, @tolbxela, спасибо за уделенное время. Ваше решение относится к Vue 3 - мой проект использует Vue 2, поэтому это не устранило ошибку. Я дважды проверил свой исходный пост, и он соответствует рекомендуемому синтаксису в проекте vue-konva. Я все еще получаю ту же ошибку. Можешь еще раз взглянуть?

Daniel Sposito 04.04.2023 01:21

Проверьте обновление для Vue v2

Tolbxela 04.04.2023 11:47

Другие вопросы по теме