TypeScript泛型在React条件Props场景下失效问题咨询

你遇到的问题核心在于：泛型T是组件的类型参数，它代表的是一个宽泛的布尔类型约束，而非具体的true或false联合类型。当你在运行时判断props.authenticated为true时，TypeScript没办法把泛型T精准收窄为true，自然也无法推断出level的具体类型。

正确的解决方式：使用可辨识联合类型 #

把Props定义成联合类型，让authenticated作为辨识属性，TypeScript就能通过它的取值自动收窄整个props的类型：

type AuthenticatedProps = {
  authenticated: true;
  level: 'basic' | 'admin';
};

type GuestProps = {
  authenticated: false;
  level: 'guest';
};

type Props = AuthenticatedProps | GuestProps;

const User = (props: Props) => {
  if (props.authenticated) {
    // 这里TypeScript能正确推断level是 'basic' | 'admin'
    return <>Profile ({props.level})</>;
  }
  // 这里level自动是 'guest'
  return <> {props.level} </>;
};

为什么原来的泛型方案不行？ #

泛型T extends boolean的作用是让组件接收的authenticated和level保持类型关联，但它本质上是给组件的调用者用的——当外部传入authenticated: true时，TypeScript会强制level必须是'basic' | 'admin'；但在组件内部，T是一个未确定的类型变量，TypeScript无法通过运行时的if判断来反向约束泛型的类型范围，所以level的类型始终是条件类型，不会被收窄。

额外说明 #

如果需要保留泛型的灵活性（比如未来扩展更多状态），也可以用类型断言结合泛型，但可辨识联合类型是处理这类条件props最直观、最可靠的方案，也是TypeScript官方推荐的模式。

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