Vuetify 2 类型错误：找不到名称“DefaultProps”

Posted 2023-02-22

【中文标题】Vuetify 2 类型错误：找不到名称“DefaultProps”

【英文标题】：Vuetify 2 Type Errors: Cannot find name 'DefaultProps'

【发布时间】：2019-12-27 03:06:48

【问题描述】：

自从我更新了我的项目以使用 Vuetify 的新 2.x 版本 (https://vuetifyjs.com) 我在编译期间遇到了一些类型错误，我不知道如何摆脱它们。正确地只是我的 tsconfig 以某种方式关闭。

我检查了文档并确保在我的 tsconfig.json 的类型部分中包含 vuetify，如下所示：

  "compilerOptions": 
    ...

    "types": [
      "webpack-env",
      "jest",
      "vuetify",
      "axios"
      ],

     ...
  

我在这里没有做任何花哨的事情：

import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue(
  vuetify,
  router,
  store,
  render: (h) => h(App),
).$mount('#app');

然后我运行开发服务器：yarn serve

ERROR in /Users/sebe/workspace/app/frontend/arena/src/main.ts
12:3 Argument of type ' vuetify: Vuetify; router: VueRouter; store: Store<any>; render: (h: CreateEle
ment) => VNode; ' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, Def
aultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
  Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOpt
ions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>
, Record<string, any>>'.
     8 | 
     9 | new Vue(
  > 10 |   vuetify,
       |   ^
    11 |   router,
    12 |   store,
    13 |   render: (h) => h(App),

ERROR in /Users/sebe/workspace/app/node_modules/vuetify/types/index.d.ts
59:10 Cannot find name 'DefaultData'.
    57 |   export interface ComponentOptions<
    58 |     V extends Vue,
  > 59 |     Data=DefaultData<V>,
       |          ^
    60 |     Methods=DefaultMethods<V>,
    61 |     Computed=DefaultComputed,
    62 |     PropsDef=PropsDefinition<DefaultProps>,

DefaultProps、PropsDefinition、DefaultComputed、DefaultMethods 重复第二个错误。

任何人的帮助都会很棒:)

更新： 我只是注意到我在使用默认的 vuetify typescript 模板时遇到了同样的错误：

vue create newapp
vue add vuetify
yarn serve

我的./plugins/vuetify.ts 看起来像这样：

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
import  VuetifyPreset  from 'vuetify/types/presets';

Vue.use(Vuetify);

const opts: Partial<VuetifyPreset> = 
  theme: 
    dark: true,
    themes: 
      light: 
        primary: colors.green.base,
      ,
      dark: 
        primary: colors.green.darken2,
      ,
    ,
  ,
  icons: 
    iconfont: 'mdi',
  ,
;

export default new Vuetify(opts);

【问题讨论】：

介意显示./plugins/vuetify的内容吗？

我用该文件的内容更新了问题:)

我在“vue ui”中运行构建任务时收到此错误，而不是在运行“npm run build”时...

用重现步骤创建了一个要点。 gist.github.com/thejoecode/a860e29e8aac881c24c795b2a844bcf2

【参考方案1】：

在 Vuetify 源码中：

export default Vuetify
export interface Vuetify

模块和接口同名Vuetify导致这个问题。

当 Typescript 想要获取 Vuetify 的接口时，总是要获取 Vuetify 的模块。

解决这个问题：

import Vuetify from 'vuetify'

将此代码添加到您的 main.ts 文件中

【参考方案2】：

我遇到了同样的问题，原来是因为我的路径中有一个符号链接：

/c/linkToDev/vueApp - 总是失败

/d/devFolder/vueApp - 一直有效

【讨论】：

这就是问题所在，也发生在 OSX 上。 /Volumes/Macintosh HD/src/test - 失败，而 /src/test - 成功。我有一个区分大小写的分区，我试图在其上构建，没有办法让它成功，因为 /Volumes/cs/src 总是无法构建。