TypeScript中含条件Props的类型用Omit后传递报错的解决方法

先还原场景：我们定义了组件X，通过never实现了education和profession二选一的可选属性约束：

type Props = {
  name: string;
  age: number;
} & (
  | {
      education?: string;
      profession?: never;
    }
  | {
      education?: never;
      profession?: string;
    }
);

export function X(props: Props) {
  return null;
}

当创建组件Y复用X时，尝试用Omit<Props, 'name'>移除name属性后传递props，却触发了类型错误：

export function Y(props: Omit<Props, 'name'>) {
  return <X name="John" {...props} />;
}

错误提示：

Type '{ age: number; education?: string | undefined; profession?: string | undefined; name: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Type '{ age: number; education?: string | undefined; profession?: string | undefined; name: string; }' is not assignable to type '{ education?: undefined; profession?: string | undefined; }'.
    Types of property 'education' are incompatible.
      Type 'string | undefined' is not assignable to type 'undefined'.
        Type 'string' is not assignable to type 'undefined'. 

问题根源 #

Omit工具类型的默认行为是先把复合类型（交叉+联合）展开成扁平结构，再移除指定属性。这会直接破坏原本通过never实现的互斥约束——原本二选一的education和profession变成了同时可选的普通属性，和Props的类型要求冲突。

解决方案 #

有两种可靠的方式解决这个问题：

方案1：手动构造目标类型

直接拆分原Props的结构，先移除公共部分的name，再和互斥属性分支交叉：

// 提取公共属性并移除name，再和互斥分支交叉
type YProps = Omit<{ name: string; age: number }, 'name'> & (
  | { education?: string; profession?: never }
  | { education?: never; profession?: string }
);

export function Y(props: YProps) {
  return <X name="John" {...props} />;
}

方案2：自定义支持联合类型的Omit工具

写一个能遍历联合类型每个分支、单独执行Omit的工具类型，保留原有的约束：

// 自定义工具类型：对联合类型的每个分支单独应用Omit
type OmitUnion<T, K extends keyof any> = T extends any ? Omit<T, K> : never;

// 用自定义工具生成Y的Props类型
type YProps = OmitUnion<Props, 'name'>;

export function Y(props: YProps) {
  return <X name="John" {...props} />;
}

这两种方式都能保留education和profession的互斥约束，避免类型错误。

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