typescript: Trailing comma error with prop typing

I’m using Typescript with Vue. I want to add typing for my props but lint giving me an error with trailing comma. In this case:

  21:6  error  Parsing error: Unexpected token, expected ","

   9 |       type: Object,
  10 |       required: true
> 11 |     } as PropOptions<MenuItem[]>,
     |       ^
  12 |   },
  13 |   data: () => ({}),
  14 | })

Code:

<script lang="ts">
import Vue, { PropOptions } from 'vue'
import { MenuItem } from '~/types/data'

export default Vue.extend({
  name: 'UiSubmenu',
  props: {
    submenuProp: {
      type: Object,
      required: true,
    } as PropOptions<MenuItem[]>,
  },
  data: () => ({}),
})
</script>

I’ve tried to disabled the comma-dangle rule but no results.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

@kevinmarrec @rcheung9 I’ve made a workaround, it was also recommended in few places:

const menuProp: PropOptions<Menu> = {
  type: Array,
  required: true,
}

props: {
  menuProp,
},

Got the same type of issue with the data object so the solution could look like that:

data: (): Navigation => ({
  subnav: [],
}),

and Navigation is a component interface. It works fine for me.

Also, I’ve moved to TSLint parser.

// .eslintrc.js
parserOptions: {
  parser: '@typescript-eslint/parser',
},

lukasborawski on Feb 17, 2020