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 https://github.com/vuejs/core/issues/4294, but the use case is different.

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

Supported in Vue Macros https://github.com/sxzz/unplugin-vue-macros/commit/2a6e990be6fc523c4b43f21a1773250ce8c88273

@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 () => (
      // ...
    )
  }
})