动态传递区分符时TypeScript区分联合类型未报错的解决方案

你的问题根源在于TypeScript对联合类型的处理逻辑：当type是动态的联合类型（如'view'|'edit'）时，只要传入的props符合联合类型中的任意一个分支（这里是edit分支），TypeScript就会认为它合法，忽略了type可能为view时禁止传入initialData的规则。

要解决这个问题，我们可以用泛型结合条件类型，让组件的Props类型严格遵循以下规则：

• 仅当type精确为edit时，要求initialData必填
• 只要type包含view或add（哪怕同时包含edit），就禁止传入initialData

实现代码 #

type CommonProps = { age: number };
type ComponentType = 'view' | 'add' | 'edit';

// 泛型Props类型：根据type的具体值动态约束属性
type Props<T extends ComponentType> = CommonProps & {
  type: T;
} & (
  // 只有当type完全等于'edit'时，才允许必填的initialData
  Extract<T, 'edit'> extends T
    ? { initialData: number }
    : // 其他情况（包括type为联合类型），禁止传入initialData
      { initialData?: never }
);

// 泛型组件定义
const Test = <T extends ComponentType>(props: Props<T>) => {
  return <div />;
};

测试验证 #

// ✅ 合法场景
<Test age={20} type="edit" initialData={100} /> // type为edit，传入必填的initialData
<Test age={20} type="view" /> // type为view，不传入initialData
<Test age={20} type="add" /> // type为add，不传入initialData

// ❌ 触发预期报错
<Test age={20} type="view" initialData={100} /> // type为view，传入initialData
<Test age={20} type="add" initialData={100} /> // type为add，传入initialData
<Test age={20} type={Math.random() > 0.5 ? 'edit' : 'view'} initialData={100} /> // 动态联合type，传入initialData

原理说明 #

Extract<T, 'edit'> extends T这个条件判断的逻辑是：

• 如果T精确等于edit，Extract<T, 'edit'>的结果就是edit，和T完全相等，条件成立，进入edit分支的属性约束
• 如果T是包含view或add的联合类型（比如'view'|'edit'），Extract<T, 'edit'>的结果只是edit，不等于完整的T，条件不成立，进入禁止initialData的分支，此时传入任何值给initialData都会触发TypeScript报错。

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