TypeScript+React：基于泛型值的条件Props失效问题问询

这不是TypeScript的bug，是泛型条件类型在顶层props场景下的类型检查特性导致的，下面具体解释并给出可行方案：

为什么直接交叉条件类型不报错？ #

你定义的Props<T>是{type:T}与条件类型的交叉，当使用<Component type="A" b="xxx" />时，TS虽然能推断出T="A"，理论上Props<T>应该是{type:"A", a:string}，但TS对顶层props的额外属性检查有特殊处理：当交叉类型包含泛型条件分支时，TS不会严格校验多余属性——这是因为泛型参数解析过程中，条件类型的分支没有被完全固化为具体类型，导致额外属性检查（excess property checking）没有触发。

而把条件类型嵌套在extraProp里时，这个属性的类型会被精准解析为PropsA，此时对象字面量直接赋值给明确的类型，触发了严格的额外属性检查，所以报错符合预期。

正确实现严格互斥props的方案 #

方案1：使用判别式联合类型（推荐） #

放弃泛型，直接用包含判别属性type的联合类型，TS会自动进行严格的类型校验，既保证必填属性，又排除多余属性：

interface PropsA {
    type: 'A';
    a: string;
}

interface PropsB {
    type: 'B';
    b: string;
}

type Props = PropsA | PropsB;

class Component extends React.Component<Props> {};

// 合法：符合PropsA要求
<Component type="A" a="test" />

// 报错：type="A"时不允许传b
<Component type="A" b="whatever" />

// 报错：缺少必填属性a
<Component type="A" />

方案2：泛型+never类型排除多余属性 #

如果一定要保留泛型写法，可以通过将不需要的属性设为never，强制TS报错：

type Props<T extends 'A' | 'B'> = 
    T extends 'A' 
    ? { type: 'A'; a: string; b?: never } 
    : { type: 'B'; b: string; a?: never };

class Component<T extends 'A' | 'B'> extends React.Component<Props<T>> {};

// 报错：b属性类型为never，无法赋值字符串
<Component type="A" b="whatever" />

// 合法
<Component type="A" a="test" />

为什么之前的联合类型尝试有问题？ #

你提到把交集改成联合类型会让属性变可选，是因为当时的写法没有把type作为判别属性绑定到对应的props分支。而方案1是将type直接嵌入每个props接口，让TS能通过type精准匹配分支，从而保证属性必填且互斥。

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