Vue 泛型元件，讓 TypeScript 更精確

鱈魚

發佈於Vue

更新於 2024/08/26發佈於 2024/04/17閱讀時間約 8 分鐘

鱈魚的魚缸搬家了！新家文章皆有重新修訂，歡迎來新家看看喔。(´▽`ʃ♡ƪ)

大家好，我是鱈魚。（＾∀＾●）ﾉｼ

Vue 3.3 終於新增了泛型元件（Generic Component），這讓我們可以在 TypeScript 環境中得到更準確的型別提示。ˋ( ° ▽、° )

這個泛型元件與 TypeScript 的 Generic 是同一個概念，不知道 Generic 的朋友可以先來來複習一下。

甚麼？你說你沒有使用 TypeScript？抱歉浪費您 5 秒鐘，可以上一頁了。（＞人＜；）

或者在離開前路過文檔湊個熱鬧。(. ❛ ᴗ ❛.)

有使用 TypeScript 的朋友就讓我們一起繼續看下去吧。ლ(╹◡╹ლ)

來個 select

假設我需要一個綁定物件的 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 這個糖

忘記元件怎麼實現 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。

這樣子就可以達成以下效果：

modelValue 與 options 型別不同時警告，
multiple 為 true 時，如果 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>