如何让TypeScript条件类型为必填Props显示正确错误提示

要解决这个问题，核心是让TypeScript明确区分互斥Props分支下的必填规则，避免联合类型导致的提示模糊。以下是具体方案：

调整类型定义，拆分互斥分支的必填项 #

把label的必填性从公共Props中拆分，直接绑定到required分支的类型里，让TypeScript能精准识别不同分支下的必填规则：

// 公共基础Props（不含label，因为label的必填性和互斥开关绑定）
type BaseProps = {
  // 这里放其他公共属性，比如className、onChange等
};

// 可选分支：开启optional时，label可选
type OptionalModeProps = BaseProps & {
  optional: true;
  required?: never;
  label?: string;
};

// 必填分支：开启required时，label强制必填
type RequiredModeProps = BaseProps & {
  required: true;
  optional?: never;
  label: string; // 这里明确标注必填
};

// 最终组件Props类型
type MyComponentProps = OptionalModeProps | RequiredModeProps;

// 组件实现
const MyComponent = (props: MyComponentProps) => {
  // 根据互斥props处理逻辑，比如用类型守卫
  const isRequired = 'required' in props && props.required;
  return <div>{isRequired ? props.label : props.label || '默认文本'}</div>;
};

为什么原来的写法提示模糊？ #

之前把label放在CommonProps中（无论互斥开关如何都标记为可选），联合类型后TypeScript无法关联“开启required时label必须存在”这一规则，只能给出模糊的“类型不匹配联合类型”提示，而无法精准指出缺失的必填label。

调整后的类型定义让每个互斥分支的规则完全独立：当你传入required: true但未传label时，TypeScript会直接提示缺少必填属性'label'，和普通必填Props的提示一致。

额外优化：组件内部的类型守卫 #

为了在组件逻辑中更安全地访问props，可以添加类型守卫确保类型判断准确：

function isRequiredMode(props: MyComponentProps): props is RequiredModeProps {
  return 'required' in props && props.required;
}

// 在组件中使用
const MyComponent = (props: MyComponentProps) => {
  if (isRequiredMode(props)) {
    // 这里props.label必然存在，不会有类型错误
    return <div>{props.label}</div>;
  }
  return <div>{props.label || '默认'}</div>;
};

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