vue/require-default-prop gives a false error with " as PropOptions<T>" with TypeScript

[wuservices]

Tell us about your environment

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 4.7.1
• Node Version: 10.9.0

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/recommended", "@vue/prettier", "@vue/typescript"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "typescript-eslint-parser"
  }
};

What did you do? Please include the actual source code causing the issue.

1. Create new TypeScript project with ESLint + Prettier with Vue CLI 3.0.1
2. In .eslintrc.js, change plugin:vue/essential to plugin:vue/recommended to get all rules
3. Add PropOptions types to HelloWorld.vue as seen below. In this example I use PropOptions<string>, which is redundant (but still shows the problem). In practice, this would be a more complex type like an interface. Typings with Typescript 2.7.1 vue#7640 (comment) is where I got inspiration for this typing syntax.

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

export default Vue.extend({
  props: {
    msg: {
      type: String,
      required: true
    } as PropOptions<string>
  }
});
</script>

What did you expect to happen?
No errors that prop msg requires a default value to be set.

$ yarn lint
yarn run v1.9.4
$ vue-cli-service lint
 DONE  No lint errors found!

What actually happened? Please include the actual, raw output from ESLint.

It looks like adding as PropOptions<string> trips up the parser such that it doesn't recognize that the msg prop is required and therefore doesn't need a default value

$ yarn lint
yarn run v1.9.4
$ vue-cli-service lint
error: Prop 'msg' requires default value to be set (vue/require-default-prop) at src/components/HelloWorld.vue:89:5:
  87 | export default Vue.extend({
  88 |   props: {
> 89 |     msg: {
     |     ^
  90 |       type: String,
  91 |       required: true
  92 |     } as PropOptions<string>

[michalsnik]

Thanks for posting this issue @wuservices I really like how you explained the problem. I confirmed it and it's due to the fact that typescript-eslint-parser returns an additional wrapper node in AST that I didn't thought about earlier. It's going to be a quick fix :)

[armano2]

@michalsnik can you close this ticket ?