Skip to content

vue/max-props: Typescript union type prop definitions count same prop multiple times #2676

Closed
@Radiergummi

Description

@Radiergummi

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: v9.19.0
  • eslint-plugin-vue version: v9.32.0
  • Vue version: v3.5.13
  • Node version: v23.6.0
  • Operating System: (Not relevant)

Please show your full configuration:

export default [ {
  rules: {
    'vue/max-props': [ 'warn', { maxProps: 6 } ],
  }
} ]

What did you do?

I'm trying to use a discriminated union for the type of my props. Here's a real-life example:

type Props = {
    items: T[];
    disabled?: boolean;
    defaultValue?: number;
    orientation?: 'vertical' | 'horizontal';
} & {
    multiple?: true;
    nonCollapsible?: never;
} | {
    multiple?: false;
    nonCollapsible?: boolean;
};

For all intents and purposes, I would argue this component defines six props:

  1. items
  2. disabled
  3. defaultValue
  4. orientation
  5. multiple
  6. nonCollapsible

The max-props rule, however, counts eight.

Here's a simplified example that can also be verified on the rule's documentation page:

<script lang="ts" setup>
defineProps<{prop1: string} | {prop1: number}>()
</script>

What did you expect to happen?
I don't know how the rule evaluates the Typescript props definition, but it should enumerate the possible keys of the type of the props and count the unique keys. Evidently, it doesn't do this currently.

What actually happened?

ESLint: Component has too many props (8). Maximum allowed is 5.(vue/ max-props)

Repository to reproduce this issue

See the documentation page linked above, just paste the snippet in the first code box.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions