TypeScript中如何让React组件Prop同时支持string与object类型？

你可以根据业务场景选择以下两种方案，优先推荐第一种，维护成本更低：

方案1：上游统一转换类型（推荐） #

不需要修改Carousel的Props定义，直接在父组件MyBlock构造items的时候，把string类型的myDateTime转换为Carousel需要的DateValue格式即可：

const items =
  data?.items?.map((node) => {
    const dateObj = new Date(node.myDateTime)
    return {
      id: node.id,
      type: TeaserType.Video,
      title: node.title,
      myDate: {
        timestamp: dateObj.getTime(),
        // formatted字段可按业务需求格式化，此处直接用原始字符串也可
        formatted: node.myDateTime
      },
    };
  }) || [];

这种方案从数据源侧统一了类型，下游组件不需要做额外兼容，类型安全性最高。

方案2：下游类型收窄兼容 #

如果你的业务场景确实需要Carousel同时支持string和DateValue两种类型的myDate，可以保留联合类型的定义，在Carousel内部使用时先做类型收窄：

1. 先定义类型守卫函数，用于判断当前值的类型

function isDateValue(val: DateValue | string | undefined): val is DateValue {
  return typeof val === 'object' && val !== null && 'timestamp' in val
}

2. 在访问timestamp属性前先做类型判断

tag: isDateValue(node?.myDate) ? node.myDate.timestamp : new Date(node.myDate as string).getTime()

TS会自动识别类型守卫的判断逻辑，在符合条件的分支里将myDate收窄为DateValue类型，不会再抛出类型错误。

不推荐直接用类型断言(node.myDate as DateValue)?.timestamp跳过类型检查，会丢失TS的类型保护能力，运行时容易出现不可预期的错误。

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