鱈魚的魚缸搬家了!新家文章皆有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)
大家好,我是鱈魚。(^∀^●)ノシ
Vue 3.3 終於新增了泛型元件(Generic Component),這讓我們可以在 TypeScript 環境中得到更準確的型別提示。ˋ( ° ▽、° )
這個泛型元件與 TypeScript 的 Generic 是同一個概念,不知道 Generic 的朋友可以先來來複習一下。
甚麼?你說你沒有使用 TypeScript?抱歉浪費您 5 秒鐘,可以上一頁了。(>人<;)
或者在離開前路過文檔湊個熱鬧。(. ❛ ᴗ ❛.)
有使用 TypeScript 的朋友就讓我們一起繼續看下去吧。ლ(╹◡╹ლ)
假設我需要一個綁定物件的 select,最常見的問題就是 modelValue 只能 any,如下:
SelectAny.vue
<script setup lang="ts">
...(省略其他程式碼)
interface Prop {
modelValue: any;
label?: string;
options: any[];
optionLabel?: (option: any) => string;
/** 是否多選 */
multiple?: boolean;
}
...
</script>
...
忘記元件怎麼實現 v-model 的朋友們別擔心,讓我們複習一下。
💡 Vue 3.4 開始可以使用 defineModel,不過與此文主題無關,所以我們先使用經典寫法。
v-model 只是一個語法糖,實際上的程式碼如下(文檔)。
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
modelValue 就是用來表示預設綁定值的變數,讓我們回到剛剛的 any。
所以現在就算我們的 modelValue 與 options 的型別不同,或者 multiple 為 true,而 modelValue 卻沒有給矩陣時,都不會有任何錯誤提示。
<script setup lang="ts">
...
import SelectAny from './SelectAny.vue';
const options: User[] = [
{ name: '鱈魚', price: 10000 },
{ name: '章魚', price: 100 }
];
const anyDatum = ref<{ age: number }>();
const seletedAnyDatum = ref<User>();
</script>
<template>
<!-- anyDatum 與 option 型別不同 -->
<SelectAny v-model="anyDatum" :options="options" :option-label="getLabel" />
<!-- modelValue 沒有給矩陣 -->
<SelectAny v-model="seletedAnyDatum" multiple :options="options" :option-label="getLabel" />
</template>
畢竟是 any 嘛。(˘・_・˘)
如果加上元件泛型就不會有以上問題了。
SelectGeneric.vue
<script
setup
lang="ts"
generic="ModelValue, Multiple extends boolean"
>
...
interface Prop {
modelValue: Multiple extends true ? ModelValue[] : ModelValue;
label?: string;
options: ModelValue[];
optionLabel?: (option: any) => string;
/** 是否多選 */
multiple?: Multiple;
}
...
</script>
...
除了 modelValue、options 有泛型 ModelValue 外,我們還加上 multiple 判斷,如果為 true,則 modelValue 為 ModelValue[],否則為 ModelValue。
這樣子就可以達成以下效果:
<script setup lang="ts">
...
import SelectGeneric from './SelectGeneric.vue';
const options: User[] = [
{ name: '鱈魚', price: 10000 },
{ name: '章魚', price: 100 }
];
const anyDatum = ref<{ age: number }>();
const seletedGenericDatum = ref<User>();
const seletedGenericData = ref<User[]>([]);
</script>
<template>
<!-- Type '{ age: number; }' is not assignable to type 'User | User[]'.ts(2322) -->
<SelectGeneric v-model="anyDatum" :options="options" :option-label="getLabel" />
<!-- Type 'User' is not assignable to type 'User[]'.ts(2322) -->
<SelectGeneric v-model="seletedGenericDatum" multiple :options="options" :option-label="getLabel" />
<!-- 正確 -->
<SelectGeneric v-model="seletedGenericData" multiple :options="options" :option-label="getLabel" />
</template>
TypeScript 成功重返光榮。o((>ω< ))o
文章到此結束了,感謝您的閱讀,以上程式碼可以在此取得。
有其他想法請不吝告訴我,鱈魚感謝您!(o゜▽゜)o☆