Conditional properties through discriminated unions and intersections in TypeScript

[theguriev]

What problem does this feature solve?

#7553
Reopening this because I believe the problem is not solved. It is still impossible to use coditional props.

Just try this after npm create vue@latest inside HelloWorld component

<script setup lang="ts">
interface CommonProps {
  size?: 'xl' | 'l' | 'm' | 's' | 'xs'
}

type ConditionalProps =
  | {
      color?: 'normal' | 'primary' | 'secondary'
      appearance?: 'normal' | 'outline' | 'text'
    }
  | {
      color: 'white'
      appearance: 'outline'
    }

type Props = CommonProps & ConditionalProps
defineProps<Props>()
</script>

and then try to use it

Theoretically it should not allow us to use both. That is, there can't be color="white" appearance="text" only color="white" appearance="outline"

What does the proposed API look like?

{
      color?: 'normal' | 'primary' | 'secondary'
      appearance?: 'normal' | 'outline' | 'text'
    }
  | {
      color: 'white'
      appearance: 'outline'
    }

[TheAlexLichter]

Added another simple example with fully "exclusive" props that should be covered as well and does not work (yet).

[goulashify]

I ran into this many times, huge +1.

[DaniilIsupov]

Typescript allows me to use Conditional Types, but Vue doesn't allow me to do this

[louiss0]

C'mon Vue and TS NEED FULL SYNERGY.

[ThejanNim]

Hi guys, Any update here? @sxzz if you can please follow up on this issue.

[johnsoncodehk]

This is a type restriction of defineComponent, as a current solution you can use generic. This will bypass defineComponent and define the component as a functional component.

<script setup lang="ts" generic="T">
interface CommonProps {
  size?: 'xl' | 'l' | 'm' | 's' | 'xs'
}
// ...
</script>