0

我用 vue-cli 创建了一个简单的 vue + typescript 应用程序。按照https://stalniy.github.io/casl/v4/en/package/casl-vue的说明,我声明了以下内容:

// main.ts
import Vue from 'vue';
import App from './App.vue';
import { abilitiesPlugin } from '@casl/vue';
import ability from './services/ability';
import { Can } from '@casl/vue';

Vue.config.productionTip = false;
Vue.use(abilitiesPlugin);
Vue.component('Can', Can);
new Vue({
    render: h => h(App)
    // ability
}).$mount('#app');

但我在第二个参数上得到错误:

 Vue.component('Can', Can);

没有重载匹配此调用。最后一个重载给出了以下错误。'FunctionalComponentOptions, PropsDefinition>>' 类型的参数不可分配给'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>' 类型的参数。属性“渲染”的类型不兼容。类型 '((this: undefined, createElement: CreateElement, context: RenderContext>) => VNode | VNode[]) | undefined' 不可分配给类型 '((createElement: CreateElement, hack: RenderContext>) => VNode) | 不明确的'。类型 '(this: undefined, createElement: CreateElement, context: RenderContext>) => VNode | VNode[]' 不可分配给类型 '(createElement: CreateElement, hack: RenderContext>) => VNode'。输入'VNode | VNode[]' 不可分配给类型 'VNode'。类型“VNode[]”缺少类型“VNode”的以下属性:isRootInsert、isCommentts(2769) vue.d.ts(112, 3):此处声明了最后一个重载。

我的 package.json 包含:

"dependencies": {
    "@casl/ability": "^4.0.5",
    "@casl/vue": "^1.0.2",
    "@typegoose/typegoose": "^6.4.0",
    "mongoose": "^5.9.9",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.1"
},
"devDependencies": {
    "@types/mongoose": "^5.7.12",
    "@typescript-eslint/eslint-plugin": "^2.26.0",
    "@typescript-eslint/parser": "^2.26.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-typescript": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1",
    "typescript": "~3.8.3",
    "vue-template-compiler": "^2.6.11"
},

提前感谢您对此的任何帮助。抱歉,如果我错过了这篇 Q 帖子的一些信息(这是我的第一篇)。

4

1 回答 1

2

CASL的作者在这里。我改进了 的打字稿类型@casl/vue,更新了文档并发布了@casl/vue.

您还可以在此 repo https://github.com/stalniy/casl-examples/tree/master/packages/vue-todo中找到 vue + casl + typescript 集成的示例

于 2020-04-22T07:35:01.893 回答