如何让TypeScript兼容if-else分支返回的双类型数据源参数？

你这里的核心问题是：data是{ createTime: string }[]和{ uploadTime: string }[]的联合类型，TypeScript无法自动确定当前data的具体子类型，所以直接访问uploadTime会触发类型报错。以下是几种实用的解决办法：

1. 类型断言（快速场景） #

如果你能通过业务逻辑确定当前data就是dataTwo类型，可以直接用类型断言告诉TypeScript：

const data = dataOne.length > 0 ? dataOne : dataTwo;
// 断言data[0]为dataTwo的元素类型
(data[0] as { uploadTime: string }).uploadTime;

⚠️ 注意：这种写法依赖你判断逻辑的准确性，如果后续逻辑改变或判断漏洞，可能引发运行时错误，只适合逻辑确定的简单场景。

2. 自定义类型守卫（安全严谨） #

写一个类型守卫函数，帮助TypeScript识别具体类型，这种方式最安全：

// 定义类型守卫，判断对象是否包含uploadTime属性
function isDataTwoItem(item: unknown): item is { uploadTime: string } {
  return typeof item === 'object' && item !== null && 'uploadTime' in item;
}

const data = dataOne.length > 0 ? dataOne : dataTwo;

if (data[0] && isDataTwoItem(data[0])) {
  // 这里TS会自动推断data[0]是{ uploadTime: string }类型
  console.log(data[0].uploadTime);
}

类型守卫会让TypeScript在代码块内自动缩小类型范围，彻底消除报错且避免运行时风险。

3. 联合类型定义+属性检查（清晰直观） #

先把两种元素类型明确定义为联合类型，再通过属性存在性检查缩小类型：

// 明确定义两种元素类型
type DataOneItem = { createTime: string };
type DataTwoItem = { uploadTime: string };
type MixedDataItem = DataOneItem | DataTwoItem;

// 重新声明状态，类型更清晰
const [dataOne, setDataOne] = useState<DataOneItem[]>([]);
const [dataTwo, setDataTwo] = useState<DataTwoItem[]>([]);

const data: MixedDataItem[] = dataOne.length > 0 ? dataOne : dataTwo;

if (data[0] && 'uploadTime' in data[0]) {
  // TS自动识别此处data[0]为DataTwoItem
  data[0].uploadTime;
}

这种方式让类型结构更清晰，无需额外函数，直接通过in操作符就能完成类型缩小。

4. 可选链+空值合并（处理空值场景） #

如果data[0]可能为空，同时需要避免报错，可以用可选链配合空值合并：

const data = dataOne.length > 0 ? dataOne : dataTwo;
// 可选链访问，不存在则返回undefined，也可加默认值
const uploadTime = data[0]?.uploadTime ?? '';

这种写法既消除TS报错，又处理了data[0]为空的边界情况，适合对空值有处理需求的场景。

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