vue/require-default-prop triggers for optional props (TypeScript)

[dmke]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: v8.52.0
• eslint-plugin-vue version: v9.18.1
• Node version: v20.9.0
• Operating System: Debian 12

Additionally:

• @typescript-eslint/eslint-plugin, v6.9.0
• typescript, v5.2.2

Please show your full configuration:

eslint:recommended + plugin:vue/vue3-recommended + plugin:@typescript-eslint/recommended.

Contents of .eslintrc.js

module.exports = {
  extends: ["eslint:recommended"],
  env: {
    browser: true,
    es6: true,
  },
  parserOptions: {
    sourceType: "module",
    ecmaVersion: 2022,
  },
  overrides: [{
    parser: "vue-eslint-parser",
    parserOptions: {
      parser: "@typescript-eslint/parser",
      sourceType: "module",
      ecmaVersion: 2022,
    },
    plugins: [
      "@typescript-eslint",
      "vue",
    ],
    files: ["**/*.ts", "**/*.vue"],
    extends: [
      "eslint:recommended",
      "plugin:vue/vue3-recommended",
      "plugin:@typescript-eslint/recommended",
    ],
  }],
}

What did you do?

<script setup lang="ts">
const props = withDefaults(defineProps<{
  width: number
  height?: number
}>(), {
  width: 100,
})
</script>

<template>
  {{ props }}
</template>

What did you expect to happen?

undefined ought to be a perfectly reasonable default value for the height prop, the vue/require-default-prop rule should not alert me to set a default.

For reference, this doesn't trigger vue/require-default-prop at all:

<script setup lang="ts">
defineProps<{
  width: number
  height?: number
}>()
</script>

What actually happened?

$ npx eslint UndefinedDefault.vue

/tmp/vue-require-default-prop-repro/UndefinedDefault.vue
  4:3  warning  Prop 'height' requires default value to be set  vue/require-default-prop

✖ 1 problem (0 errors, 1 warning)

Repository to reproduce this issue

https://github.com/dmke/vue-require-default-prop-repro

[FloEdelmann]

Duplicate of #2051. Thanks for the detailed issue description though 🙂

[dmke]

Is it a duplicate? I've seen that issue, but I thought it was concerned with props consisting of ComponentObjectPropsOptions, i.e.

defineProps({ name: { type: String, default: undefined } })

versus this issue targeting the type parameters, i.e.

defineProps<{ name?: string }>()

[FloEdelmann]

Hmm, it's not an exact duplicate, but definitely the same root issue. See also the src/components/DisplayMessageCorrect.vue example there. Maybe you can comment there to have all information in one place?

[dmke]

Sure, will do.

Thanks!