Gissues: Conditional properties through discriminated unions and intersections in TypeScript

theguriev

Aug 10th 2023

What problem does this feature solve?

https://github.com/vuejs/core/issues/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'
    }