Unknown VueKonva Type w/ TypeScript

Question

我最近为我的Vue 2项目配置了TypeScript。一切都在工作，除了我的VueKonva插件-我收到下面的应用程序启动错误。

我试着在tsconfig.json中添加"vue-konva",到types，但没有运气。创建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"
]
}

Answer 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/vue@3.2.47/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/konva@8.4.3/konva.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/vue-konva@3.0.2/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/konva@8.4.3/konva.min.js"></script>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
<!--2. Link VueKonva Javascript -->
<script src="https://unpkg.com/vue-konva@2.1.7/umd/vue-konva.js"></script>