关于typescript：Vue-vuetify-对象文字只能指定已知属性，并且’vuetify’在类型’ComponentOptions 中不存在


Vue - vuetify - Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions

使用以下指南，使用TypeScript创建了一个新的Vue项目：

https://vuejs.org/v2/guide/typescript.html

  • 安装Vue CLI(如果尚未安装)

    npm install --global @ vue / cli

  • 创建一个新项目，然后选择"手动选择功能"选项

    可以创建我的项目名称

    • 使用npm run serve测试了项目，并且工作正常。

    然后，我通过运行vue add vuetify添加了vuetify

    https://vuetifyjs.com/zh-CN/getting-started/quick-start/

    但是，这导致了一些错误：

    ERROR in
    C:/Test/vue-test/src/main.ts(13,3): 13:3
    No overload matches this call. Overload 1 of 3, '(options?:
    ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to
    parameter of type 'ThisTypedComponentOptionsWithArrayProps'.
    Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps'. Overload 2 of 3, '(options?:
    ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to
    parameter of type 'ThisTypedComponentOptionsWithRecordProps'.
    Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps'. Overload 3 of 3, '(options?:
    ComponentOptions, DefaultMethods,
    DefaultComputed, PropsDefinition>, Record<...>> |
    undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to
    parameter of type 'ComponentOptions,
    DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'.
    Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions,
    DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'.
    11 | router,
    12 | store,

    13 | vuetify,
    | ^
    14 | render: h => h(App)
    15 | }).$mount('#app')
    16 | ERROR in C:/Test/vue-test/src/plugins/vuetify.ts(2,21):
    2:21 Could not find a declaration file for module 'vuetify/lib'.
    'C:/Test/vue-test/node_modules/vuetify/lib/index.js'
    implicitly has an 'any' type. Try npm install @types/vuetify if it
    exists or add a new declaration (.d.ts) file containing declare
    module 'vuetify/lib';
    1 | import Vue from 'vue';
    2 | import Vuetify from 'vuetify/lib';
    | ^
    3 |
    4 | Vue.use(Vuetify);
    5 | Version: typescript 3.8.3 Time: 1997ms

    在这里找到了一个很好的答案：

    https://github.com/vuetifyjs/vue-cli-plugins/issues/112#issuecomment-562935079

    无需添加typeRoots。

    只需将vuetify添加到tsconfig.json.中compilerOptions下的types

    例：

    1
    2
    3
    4
    5
    6
    "types": [
     "webpack-env",
     "mocha",
     "chai",
     "vuetify"
    ],