typescript - 使用打字稿声明 vue 组件 @Prop 时出现意外标记

Question

我正在尝试将 typescript 与 vuejs 一起使用，通常我使用类似的东西

  @Component({
    props: ['uploadUrl'],
  })

  export default class SelectionModal extends Vue {
    let x = this.uploadUrl // This variable `uploadUrl` is NOT resolved in my IDE
  }

但uploadUrl在我的IDE（phpStorm）中没有解析

但是我们可以vue-property-decorator通过声明@Prop 来修复它，就像这里记录的那样。代码变为：

<template>
// ... 
</template>

<script type="ts">
  import {Component, Vue, Prop} from 'vue-property-decorator';
  
  @Component
  export default class SelectionModal extends Vue {
    @Prop(String) readonly uploadUrl!: string

    let x = this.uploadUrl // This variable `uploadUrl` is RESOLVED in my IDE
  }
</script>

然而，这个基本声明引发了这样的问题

SyntaxError: /myProject/src/path/to/MyComponent.vue: Unexpected token (33:25)

  31 | 
  32 | export default class SelectionModal extends Vue {
> 33 |   @Prop(String) readonly uploadUrl!: string
     |                          ^

这里的任何人都有一个想法：

1-如何使用第一个解决方案并uploadUrl解决

2-或如何解决这个Unexpected token问题？

Answer 1

您的第一个示例无法编译 - 您不能let直接在类主体中声明，并且通过this.prop在构建应用程序时通过导致“类型上不存在属性 'prop'...”错误来访问道具。

当使用正确的标签属性时，第二个代码片段对我来说很好<script>- 尝试更改type为lang将您的代码视为 Typescript 源：

<script lang="ts">
  import {Component, Vue, Prop} from 'vue-property-decorator';
  
  @Component
  export default class SelectionModal extends Vue {
    @Prop(String) readonly uploadUrl!: string
    
    myMethod(){
      let x = this.uploadUrl 
    }
  }
</script>