typescript - Vue - vuetify - 对象字面量只能指定已知属性，类型 'ComponentOptions>' 中不存在 'vuetify'

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

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

1. 安装 Vue CLI，如果还没有安装的话

   npm install --global @vue/cli

2. 创建一个新项目，然后选择“手动选择功能”选项

   vue 创建 my-project-name

使用 npm run serve 测试了该项目，运行没有问题。

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

https://vuetifyjs.com/zh/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<Vue, object, object, object,
never> | undefined): CombinedVueInstance<Vue, object, object, object,
Record<...>>', 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<Vue,
object, object, object, never>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue,
object, object, object, never>'.   Overload 2 of 3, '(options?:
ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object,
object> | undefined): CombinedVueInstance<Vue, object, object, object,
Record<...>>', 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<Vue,
object, object, object, object>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue,
object, object, object, object>'.   Overload 3 of 3, '(options?:
ComponentOptions<Vue, DefaultData, DefaultMethods,
DefaultComputed, PropsDefinition<Record<string, any>>, 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<Vue, DefaultData,
DefaultMethods, DefaultComputed, PropsDefinition<Record<string,
any>>, Record<...>>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData,
DefaultMethods, DefaultComputed, PropsDefinition<Record<string,
any>>, 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

答案＃1

在这里找到一个好答案：

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

不过不需要添加 typeRoots。

只需在 tsconfig.json 中的 compilerOptions 下的 types 中添加 vuetify。

示例：

"types": [
  "webpack-env",
  "mocha",
  "chai",
  "vuetify"
],