如何在TypeScript条件类型中引用prop值实现类型校验

你要的效果完全可以实现，核心问题是独立类型别名无法引用未来绑定到这个位置的实际值，所有需要根据传入值动态计算类型的场景，都要通过泛型参数捕获传入的字面量类型，再做条件判断，泛型参数就是你用来引用传入值的载体。

第一步：定义带泛型的校验工具类型 #

把你原来的Validate改成接收字符串泛型的工具类型，泛型参数T就代表实际传入的值：

// 若要做非法值拦截，不符合规则时返回never触发类型报错
type Validate<T extends string> = T extends `${string} ${string}`
  ? never // 带空格时返回never，传入该值TS会直接报类型错误
  : T;

// 如果只是要做类型标记而非拦截，可以改成你原来的返回逻辑
// type Validate<T extends string> = T extends `${string} ${string}`
//   ? 'I have whitespace'
//   : 'I dont have whitespace'

第二步：给Props和组件加泛型支持 #

要捕获实际传入的prop值，Props和组件本身都要支持泛型，TSX中箭头泛型组件可以在泛型后加逗号，避免泛型参数被识别为JSX标签：

type Props<T extends string> = {
  prop?: Validate<T>;
}

const Component = <T extends string,>(props: Props<T>) => <div {...props} />;

使用效果 #

TS会自动根据你传入的prop值推导泛型参数，不需要手动指定类型：

// 合法，无空格，TS无报错
<Component prop="normalText" />

// 非法，包含空格，TS会直接标红提示类型不匹配
<Component prop="text with space" />

注意：这种校验只针对字符串字面量生效，如果传入的是宽泛的string类型变量而非固定字面量，TS无法推导出具体内容，就不会触发校验。

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