VueJS + TypeScript装饰器问题

时间:2018-12-10 11:27:15

标签: typescript vue.js vue-cli

使用vue-cli创建新应用程序时,我遇到一个奇怪的问题:HelloWorld组件的装饰器出错。 我什么都没碰,所有的代码和配置都来自vue-cli。

这是错误:

ERROR in /Users/JohnSmith/test/src/components/HelloWorld.vue
37:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': extend, nextTick, set, delete, and 7 more.
    35 | import { Component, Prop, Vue } from 'vue-property-decorator';
    36 | 
  > 37 | @Component
       | ^
    38 | export default class HelloWorld extends Vue {
    39 |   @Prop() private msg!: string;
    40 | }

我找到了解决方法:

@Component({
  props: {
    msg: {type: String},
  },
})
export default class HelloWorld extends Vue {
  // @Prop() private msg!: string;
}

但是我想使用装饰器,这对于生成的虚拟项目有错误是不正常的。

这是我的环境:

  • macOS High Sierra 10.13.6
  • 节点v11.3.0(含brew)
  • npm 6.4.1
  • 纱线1.12.3(带冲泡)
  • Vue CLI v3.2.1
  • 啤酒医生很好

这是我用于创建项目的vue-cli选项:

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

我在任何地方都找不到有关此问题的任何信息。

是从哪里来的吗?

感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

尝试从vue导入Vue ... 喜欢:

import Vue from 'vue';
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}