Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks done
Radiergummi opened this issue Feb 3, 2025 · 0 comments · Fixed by #2683
Closed
2 tasks done
Labels

Comments

@Radiergummi
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants