Conditional properties through discriminated unions and intersections in TypeScript

[roydukkey]

What problem does this feature solve?

It would be very useful to explain component properties the following manner.

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

What does the proposed API look like?

This issue is related to #4294, but the use case is different.

Here is an article that goes into more information on this approach.

[sxzz]

Supported in Vue Macros vue-macros/vue-macros@2a6e990

[rob-pace]

@sxzz Do you know how this would be accomplished using .ts?

export default defineComponent({
  name: 'MyComponent',
  props: {
    // are there vue native types that can be imported here to support discriminated unions and intersections?
  },
  setup() {
    return () => (
      // ...
    )
  }
})