如何为Vue泛型组件的多个属性强制执行类型匹配

问题背景 #

定义Vue泛型组件时，若组件的多个属性（如选择器的modelValue和options）依赖同一泛型类型，TypeScript会自动合并所有传入参数的类型为联合类型，无法校验这些属性是否来自同一组可选值。

比如这个泛型选择器组件：

<script setup lang="ts" generic="T extends string">
// 期望modelValue和options的类型严格匹配
defineProps<{
  modelValue?: T
  options: readonly T[]
}>()

const emit = defineEmits<(e: 'update:modelValue', val?: T) => void>()
// 渲染select逻辑
</script>

当传入不匹配的类型时，TypeScript不会报错：

<script setup lang="ts">
type ValidOptions = "Big"|"Small"|"Medium"
const value = ref<ValidOptions>("Small")
</script>
<template>
  <!-- options和modelValue类型不匹配，但未触发报错 -->
  <MySelect :options="['Chicken','Little'] as const" v-model="value" />
</template>

此时泛型T会被推断为"Chicken"|"Little"|"Big"|"Small"|"Medium"的联合类型，完全失去了类型校验的作用。

解决方法 #

核心思路是限制泛型仅从options推断类型，强制modelValue必须匹配该类型，避免TypeScript合并多个属性的类型。可以通过NoInfer工具类型实现：

1. 使用TypeScript内置的NoInfer（TS5.1+） #

修改组件的props定义，用NoInfer阻止modelValue参与泛型推断，确保T仅由options决定：

<script setup lang="ts" generic="T extends string">
// TS5.1+自带NoInfer，无需额外定义
defineProps<{
  options: readonly T[]
  // 强制modelValue必须匹配T的类型，不参与泛型推断
  modelValue?: NoInfer<T>
}>()

const emit = defineEmits<(e: 'update:modelValue', val?: T) => void>()
</script>

此时再使用不匹配的属性时，TypeScript会直接抛出类型不兼容的错误：Type 'ValidOptions' is not assignable to type '"Chicken" | "Little" | undefined'，符合预期。

2. 自定义NoInfer（兼容TS5.1以下版本） #

如果项目使用的TypeScript版本低于5.1，可以手动实现NoInfer工具类型：

// 在项目的类型定义文件中添加
type NoInfer<T> = [T][T extends any ? 0 : never]

然后在组件中导入并使用，效果和内置版本一致。

原理说明 #

NoInfer的作用是标记某个类型不参与泛型推断过程，让TypeScript优先从其他属性（这里是options）确定泛型T的具体类型，再校验modelValue是否符合该类型。这样就避免了泛型被自动合并为所有传入类型的联合类型，实现了属性类型的强关联校验。

内容的提问来源于stack exchange，提问作者FrozenKiwi