Allow defining props as a type instead of generic argument

[ahku]

The Problem

With Reactive Props Destructure becoming the recommended way for defining props and settings defaults, I thought that this TypeScript issue would be more discussed but can't find anyone talking about it. I also posted it in the vuejs discussions, but maybe that was the wrong forum.

The problem is that you can now set any default values to props that you have defined without any error detection, at least not in the IDE:

// Works
const { position = 'up' } = defineProps<{ position?: 'left' | 'right' }>()
// Also works
const { position = 2 } = defineProps<{ position?: 'left' | 'right' }>()

I don't run any typescript checks in the terminal or any linter, so I don't know if it's catched that way. But is this considered a minor issue, or is there a plan to update the API to address this?

The Solution

Suggestion: Vue could perhaps go the Svelte 5-route and let us define props as the value type:

interface Props {
  position?: 'left' | 'right'
}
const { position = 'left' }: Props = defineProps()

This should be feasiable since defineProps is a macro anyway, and just like with the current generic argument it is a TypeScript exclusive feature that is compiled away.

Non-breaking change?

This should be introduced as a new way of defining props with types, and the old way should still continue to work. That way we can gradually get used to it, and apply it where types matter.