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

时间:2019-08-21 19:50:40

标签: typescript vue.js vuetify.js vue-cli ts-loader

自从我更新了项目以使用新的2.x版本的Vuetify(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,重复第二个错误。

Anyones的帮助会很棒:)

更新: 我刚刚注意到,使用默认的vuetify打字稿模板时会遇到相同的错误:

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);

2 个答案:

答案 0 :(得分:2)

在Vuetify来源中:

export default Vuetify
export interface Vuetify

模块和接口使用相同的名称Vuetify导致此问题。

当Typescript想要获取Vuetify的接口时,但始终要获取Vuetify的模块。

要解决此问题:

import { Vuetify } from 'vuetify'

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

答案 1 :(得分:1)

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

Table 1. UNIX TCP/IP error numbers errnos AIX error number Linux error number Description : EPIPE 32 32 Broken pipe. -总是失败

/c/linkToDev/vueApp-一直有效