React TypeScript泛型组件条件类型推断异常问题咨询

你遇到的问题出在TypeScript对泛型组件的类型推断逻辑上：

• 直接声明const test: Props<{variant:"link"}>时，T是明确指定的{variant:"link"}，条件类型Props<T>能精准匹配到LinkButtonProps。
• 但使用组件<MenuItem variant="link" href="test" text="test"/>时，TypeScript无法从传入的props反向推导出T的具体类型——因为T被约束为BaseProps，而你传入的props包含href（超出BaseProps范围），TypeScript无法将这些额外属性关联到T的variant分支，最终条件判断失效，默认匹配到了最后一个分支DropdownButtonProps。

解决方案：改用区分联合类型 #

不需要用泛型，直接把组件props定义为区分联合类型（Discriminated Union），让TypeScript通过variant字段自动窄化类型：

import React from 'react';

type CloseButtonProps = {
  variant: 'close';
  text: string;
  onClose: () => void;
  onClick: () => void;
};

type LinkButtonProps = {
  variant: 'link';
  text: string;
  href: string;
  isExternal?: boolean;
};

type DropdownButtonProps = {
  variant: 'dropdown';
  text: string;
  content: string;
};

// 定义为区分联合类型，每个分支有唯一的variant字面量
type MenuItemProps = CloseButtonProps | LinkButtonProps | DropdownButtonProps;

const MenuItem = (props: MenuItemProps) => {
  return null;
};

// 现在TypeScript能正确识别：variant="link"时必须传入href属性
const element = <MenuItem variant="link" href="test" text="test"/>;

如果要保留原有的BaseProps结构，可通过交叉类型合并后生成联合类型：

import React from 'react';

type BaseProps = {
  text: string;
};

type CloseButtonProps = BaseProps & {
  variant: 'close';
  onClose: () => void;
  onClick: () => void;
};

type LinkButtonProps = BaseProps & {
  variant: 'link';
  href: string;
  isExternal?: boolean;
};

type DropdownButtonProps = BaseProps & {
  variant: 'dropdown';
  content: string;
};

type MenuItemProps = CloseButtonProps | LinkButtonProps | DropdownButtonProps;

const MenuItem = (props: MenuItemProps) => {
  return null;
};

const element = <MenuItem variant="link" href="test" text="test"/>;

区分联合类型的核心是每个分支都有唯一的字面量类型字段（这里是variant），TypeScript会根据该字段自动推断当前props所属分支，从而正确校验其他属性。

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