Vue+TypeScript组件库：如何在类型定义时校验属性子集合法性？

要在类型定义阶段就检测出不属于通用类型的非法值，你需要的是类型约束而非单纯的提取操作。Extract的逻辑是取两个类型的交集，会自动忽略不在通用类型里的成员，所以无法触发定义阶段的错误提示。下面提供两种实用方案：

方案一：基础约束工具类型 #

创建一个工具类型，强制要求子集必须完全属于通用类型，一旦出现非法值直接报错：

// 工具类型：确保U是T的子集
type EnsureSubset<T, U extends T> = U;

// 通用size类型
type SizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

// 正确示例：输入组件仅支持sm/md，无错误
type InputSize = EnsureSubset<SizeProp, 'sm' | 'md'>;
type InputProps = {
  size?: InputSize;
};

// 错误示例：包含非法值'2xl'，定义阶段直接报错
type BadInputSize = EnsureSubset<SizeProp, 'sm' | 'md' | '2xl'>;
// 报错信息：Type '"2xl"' is not assignable to type 'SizeProp'.

方案二：带明确错误提示的工具类型 #

如果需要更直观的错误信息，可以用条件类型自定义报错内容：

// 工具类型：检查子集合法性，非法值时给出明确提示
type EnsureSubset<T, U> = U extends T 
  ? U 
  : never & { __INVALID_MEMBERS__: `${Exclude<U, T>} 不是 ${T} 的有效成员` };

type SizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

// 错误示例
type BadInputSize = EnsureSubset<SizeProp, 'sm' | 'md' | '2xl'>;
// 报错信息：Type '"2xl" 不是 "xs" | "sm" | "md" | "lg" | "xl" 的有效成员' is not assignable to type 'never'.

在Vue组件Props中的应用 #

直接把约束整合到组件Props定义中，比如：

import { defineComponent, PropType } from 'vue';

type SizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type EnsureValidSize<T extends SizeProp> = T;

// 按钮组件：支持所有size选项
const Button = defineComponent({
  props: {
    size: {
      type: String as PropType<SizeProp>,
      default: 'md'
    }
  }
});

// 输入组件：仅支持sm/md，写错会直接报错
const Input = defineComponent({
  props: {
    size: {
      type: String as PropType<EnsureValidSize<'sm' | 'md'>>,
      default: 'md'
    }
  }
});

这个思路的核心是用extends强制子集必须完全包含在通用类型中，替代Extract的交集逻辑，从而在类型定义阶段就拦截非法值。

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