Is there a way to fix this TypeScript eslint issue in Nuxtjs

user_9663578 0
Viewed 944

I'm writing a NuxtJS (Vue) component that uses props with TypeScript.

I followed the example presented within the documentation, but ESLint brings out an error that is not supposed to be there.

There doesn't seem to be any syntax errors from what I have gathered and the ESLint rule that is required to solve this error is nowhere to be found from my google searches.

<template>
  <a :href="this.button.buttonLink">
    <p v-bind="this.button.buttonText"/>
    <img src="@/static/assets/icons/smallArrow.svg" />
  </a>
</template>

<script lang="ts">
import Vue, { PropOptions } from 'vue'

interface Button {
  buttonText: string,
  buttonLink: string
}

export default Vue.extend({
  name: 'ButtomComponent',

  props: {
    button: {
      type: Object,
      required: true
    } as PropOptions<Button>
  }
})
</script>

The expected outcome should be a normal render of the component. But I get the following:

Parsing error: Unexpected token, expected ","
  14 |       type: Object,
  15 |       required: true
> 16 |     } as PropOptions<Button>
     |       ^
  17 |   }
  18 | })
  19 |eslint

Fixed I resolved the issue by commenting(you can remove completely) Babel-eslint from parserOptions within the eslint config file.

parserOptions: {
    // parser: 'babel-eslint'
  },
nuxt.js typescript
1 Answers

As found here you should cast the prop type like

  props: {
    button: {
      type: Object as () => Button,
      required: true
    }
  }

I did not test this but the explanation makes sense for me

When you pass an Object as a prop type into Vue component, you’re actually passing an Object constructor.

EDIT

A little but futher down there is also mentioned a PropType

props: {
    button: Object as PropTypes<Button>
}
user_44856330
Related