CODEWITHSUNDEEP
typescriptvuejs2propertiesphpstormvue-property-decorator
4givN
4givN

Reputation: 3234

Unexpected token when declaring vue component @Prop with typescript

I'm trying to use typescript with vuejs, normally I use something like

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

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

but the uploadUrl is not resolved in my IDE (phpStorm) enter image description here

But we can fix it with vue-property-decorator, by declaring @Prop like documented here. The code becomes:

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

enter image description here

However, this basic declaration fires such issue

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
     |                          ^

Anyone here has an idea :

1- how to use the 1st solution and make the uploadUrl resolved

2- OR how to get ride of the Unexpected token issue ?

Upvotes: 1

Views: 1469

Answers (1)

lena
lena

Reputation: 93728

Your first example doesn't compile - you can't declare let directly in the class body, and accessing the props through this.prop causes " Property 'prop' does not exist on type..." error when building the app.

The second code snippet works fine for me when using the right <script> tag attributes - try changing type to lang to have your code treated as a Typescript source:

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

Upvotes: 2

Related Questions