Question

我正在编写一个将Types与props一起使用的NuxtJS（Vue）组件。

我遵循了文档中提供的示例，但是ESLint带来了一个本不应该存在的错误。

从我收集的内容来看，似乎没有任何语法错误，而从我的Google搜索中找不到解决该错误所需的ESLint规则。

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

预期结果应该是组件的正常渲染。但我得到以下信息：

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

已修复 我通过在eslint配置文件中的parserOptions中评论（可以完全删除）Babel-eslint解决了该问题。

parserOptions: {
    // parser: 'babel-eslint'
  },

Answer 1

发现here时，您应该像这样投射道具类型

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

我没有测试，但是这个解释对我来说很有意义

将对象作为道具类型传递给Vue组件时，实际上是在传递对象构造函数。

编辑

还有一点，但还有一个PropType

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

有没有办法解决Nuxtjs中的TypeScript eslint问题

1 个答案: