What problem does this feature solve?
We can pass type parameter in TypeScript via generics:
function <T extends string | number>doSth(value:T): T[] {
if (value === "123") {
return toArray(123); // throw an error, number[] is not compatible with T[]
}
return toArray<T>(value)
}But we cannot do so in Vue template.
<my-select v-model="selectedFruit">
<my-option value="🍎" />
<my-option value="🍌" />
<my-option value="🐘" /> // should throw an error, 🐘 is not compatible with selectedFruit
</my-select>
To make this possible, we need the ability to restrict what components can be in slot：
defineSlots({
default: {
accept: MyOption<T>
}
})<my-select v-model="selectedFruit">
<my-option value="🍎" />
<my-option value="🍌" />
<my-option value="🐘" /> // 🐘 is not compatible with selectedFruit
</my-select>
also, now we have ability to prevent developer from putting unexpected components in slots!
<my-select v-model="selectedFruit as any">
<my-radio v-model="radioValue" /> // throw an error, my-radio should not be here
</my-select>
Sometimes TypeScript cannot infer acutal type we want:
<my-button-group :buttons="['🍚', '🍗']" @click="handleUpdate" />
type Foods = '🍚' | '🍗';
const handleClick= (food: Foods) => {
console.log(food);
}buttons will infer as string[], and @click handle is (value: string) => void, but we need Foods[] and (value: Foods) => void
So we also need ability to specify what type we want:
<my-button-group[Foods] :buttons="['🍚', '🍗']" @click="handleUpdate" />
What does the proposed API look like?
For template:
<my-select[typeof selectedFruit] v-model="selectedFruit">
<my-option value="🍎" />
<my-option value="🍌" />
<my-option value="🐘" /> // 🐘 is not compatible with selectedFruit
</my-select>
<my-select v-generics="typeof selectedFruit" v-model="selectedFruit">
<my-option value="🍎" />
<my-option value="🍌" />
<my-option value="🐘" /> // 🐘 is not compatible with selectedFruit
</my-select>
For slot type definition:
defineSlots({
default: {
accept: MyOption<T>
}
})
What problem does this feature solve?
We can pass type parameter in TypeScript via generics:
But we cannot do so in Vue template.
To make this possible, we need the ability to restrict what components can be in slot：
also, now we have ability to prevent developer from putting unexpected components in slots!
Sometimes TypeScript cannot infer acutal type we want:
buttonswill infer asstring[], and@clickhandle is(value: string) => void, but we needFoods[]and(value: Foods) => voidSo we also need ability to specify what type we want:
What does the proposed API look like?
For template:
For slot type definition: