You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We can pass type parameter in TypeScript via generics:
function<Textendsstring|number>doSth(value:T): T[]{if(value==="123"){returntoArray(123);// throw an error, number[] is not compatible with T[]}returntoArray<T>(value)}
But we cannot do so in Vue template.
<my-selectv-model="selectedFruit">
<my-optionvalue="🍎" />
<my-optionvalue="🍌" />
<my-optionvalue="🐘" /> // 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-selectv-model="selectedFruit">
<my-optionvalue="🍎" />
<my-optionvalue="🍌" />
<my-optionvalue="🐘" /> // 🐘 is not compatible with selectedFruit
</my-select>
also, now we have ability to prevent developer from putting unexpected components in slots!
<my-selectv-model="selectedFruit as any">
<my-radiov-model="radioValue" /> // throw an error, my-radio should not be here
</my-select>
Sometimes TypeScript cannot infer acutal type we want:
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:
This is an issue that requires consideration. In my opinion, using v-generic (in line with <script setup lang="ts" generic="T">) would be preferable. It's not feasible to add generics to the element tag as we need to maintain compatibility with native HTML code.
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:
buttons
will infer asstring[]
, and@click
handle is(value: string) => void
, but we needFoods[]
and(value: Foods) => void
So we also need ability to specify what type we want:
What does the proposed API look like?
For template:
For slot type definition:
The text was updated successfully, but these errors were encountered: