可选链操作符无法满足TypeScript对象类型守卫需求

在处理联合类型时，尝试用可选链?.访问不同类型的专属属性（比如Obj1的url和Obj2的src），TypeScript不会将可选链视为类型守卫，因此抛出属性不存在的错误。虽然"url" in item或类型断言能临时解决，但组件规模较大时重复编写这类逻辑会非常繁琐。

代码示例 #

type Obj1 = {
  url: 'coolurl.com'
}

type Obj2 = {
  src: 'someurl.com'
}

function SomeComponent(item: Obj1 | Obj2) {
  return (
    <img src={item?.url || item?.src} />
  )
}

报错信息 #

Property 'url' does not exist on type 'Obj1 | Obj2'.
Property 'url' does not exist on type 'Obj2'

可行解决方案 #

1. 复用类型守卫函数 #

编写一次类型守卫函数，后续在组件中直接调用，避免重复判断：

type Obj1 = { url: 'coolurl.com' };
type Obj2 = { src: 'someurl.com' };

// 定义类型守卫
function isObj1(item: Obj1 | Obj2): item is Obj1 {
  return 'url' in item;
}

function SomeComponent(item: Obj1 | Obj2) {
  const src = isObj1(item) ? item.url : item.src;
  return <img src={src} />;
}

2. 提取取值逻辑为工具函数 #

将获取图片地址的逻辑抽离成独立工具函数，组件内仅需调用函数即可：

type Obj1 = { url: 'coolurl.com' };
type Obj2 = { src: 'someurl.com' };

// 工具函数封装取值逻辑
function getImageSrc(item: Obj1 | Obj2) {
  return 'url' in item ? item.url : item.src;
}

function SomeComponent(item: Obj1 | Obj2) {
  return <img src={getImageSrc(item)} />;
}

3. 重构联合类型（若允许调整类型定义） #

给联合类型添加共同的判别属性，让TypeScript自动完成类型守卫：

// 添加判别属性type
type Obj1 = { type: 'url', url: 'coolurl.com' };
type Obj2 = { type: 'src', src: 'someurl.com' };

function SomeComponent(item: Obj1 | Obj2) {
  const src = item.type === 'url' ? item.url : item.src;
  return <img src={src} />;
}

以上方案均能避免在组件中重复编写繁琐的判断逻辑，其中前两种方案无需改动原有类型定义，更适合已有大型组件的场景。

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