TypeScript中React组件Props如何同时接收布尔值与配置对象？

你的逻辑误区 #

1. 误用交类型（&）：第一个类型定义animated?: boolean & {property1: type1, ...}用了交类型，意味着值必须同时是布尔值和配置对象，但JavaScript中不存在既是布尔又是对象的原始值，所以只能通过as断言绕过，完全不符合类型安全设计。
2. 未做类型窄化：第二个类型用了正确的联合类型（|），但你直接访问property1时，TypeScript是静态类型检查，它不知道运行时animated到底是布尔值还是对象，会检查联合类型的所有分支——布尔值分支没有property1，因此报错。你误以为TypeScript会自动推导实际传入的类型，但必须显式做类型守护才能窄化类型范围。

更优实现方案 #

步骤1：定义基础类型 #

先明确动画配置的类型：

// 定义动画配置结构
type AnimationConfig = {
  property1: Type1; // 替换成你的实际类型
  // 其他自定义配置属性
};

// 组件Props类型
type MyComponentProps = {
  animated?: boolean | AnimationConfig;
};

步骤2：组件内处理props（带类型窄化） #

在组件里先处理默认值，再通过类型判断窄化类型，确保安全访问属性：

const MyComponent = ({ animated = true }: MyComponentProps) => {
  // 解析动画状态与配置
  const isAnimationEnabled = typeof animated !== 'boolean' || animated;
  const animationConfig = typeof animated === 'object' ? animated : undefined;

  // 使用配置时，通过类型判断确保安全
  if (animationConfig) {
    // 这里animationConfig已被窄化为AnimationConfig类型，可直接访问property1
    console.log(animationConfig.property1);
  }

  // ...组件渲染逻辑
  return <div>{/* 内容 */}</div>;
};

进阶：封装解析函数（更清晰） #

如果需要复用解析逻辑，可以封装成工具函数：

const parseAnimationProps = (animated?: boolean | AnimationConfig) => {
  if (animated === false) {
    return { enabled: false, config: undefined } as const;
  }
  if (typeof animated === 'object') {
    return { enabled: true, config: animated } as const;
  }
  // 处理undefined或true的情况
  return { enabled: true, config: undefined } as const;
};

// 组件内使用
const MyComponent = ({ animated }: MyComponentProps) => {
  const { enabled, config } = parseAnimationProps(animated);

  if (config) {
    // 安全访问配置属性
    console.log(config.property1);
  }

  // ...渲染逻辑
};

为什么报错针对false而非布尔类型？ #

TypeScript在处理联合类型的属性访问错误时，会优先显示具体的字面量类型而非宽泛的父类型。boolean类型包含true和false两个字面量分支，两者都没有property1属性，但编译器会选择其中一个具体分支（通常是false）来提示错误，本质是在告诉你：联合类型中的这个分支不具备你要访问的属性。

内容的提问来源于stack exchange，提问作者Fabio R.