TypeScript联合类型分支属性访问的类型错误修复咨询

嘿，我来帮你搞定这个TypeScript的类型报错问题！

首先得搞清楚为什么会出现这些错误：你定义的Banner是ImageBanner和VideoBanner的联合类型，TypeScript对于联合类型有个核心规则——在没有做类型收窄的情况下，只能访问所有分支都共有的属性。image是ImageBanner独有的，videoUrl是VideoBanner独有的，所以哪怕你加了?.可选链（它只处理值可能为undefined的情况，管不了类型层面的检查），TS还是会报错，因为它不确定当前的Banner到底是哪一个分支类型。

下面给你几种靠谱的解决办法，你可以根据自己的场景选：

方案一：用in操作符做类型收窄（快速解决） #

这是最直接的方式，利用TypeScript对in操作符的类型推断能力，自动把联合类型收窄到对应的分支：

const currentBanner = mybanners[0];
// 先判断是否存在image属性，TS会自动识别为ImageBanner类型
if (currentBanner && 'image' in currentBanner) {
  console.log(currentBanner.image.src);
}
// 同理判断videoUrl属性
if (currentBanner && 'videoUrl' in currentBanner) {
  console.log(currentBanner.videoUrl);
}

这样写之后，TS就不会再报错了，因为它能明确知道当前分支下的具体类型。

方案二：给联合类型加区分符（推荐长期方案） #

这是更健壮的做法，给每个联合类型分支加一个字面量类型的区分属性，让TypeScript能精准识别不同分支，以后扩展新的Banner类型也更方便：
先修改你的类型定义：

type BannerImage = { src: string; srcSet?: Array<{ media: string; src: string }>; alt?: string; };
type BaseBanner = { title: string; subHeadline?: string; campaignDetails: { campaignUrl?: string; cta?: string; }; };

// 给ImageBanner加一个type: 'image'的字面量属性
type ImageBanner = BaseBanner & { 
  type: 'image';
  image: BannerImage; 
};
// 给VideoBanner加一个type: 'video'的字面量属性
type VideoBanner = BaseBanner & { 
  type: 'video';
  videoUrl: string; 
};

export type Banner = ImageBanner | VideoBanner;

然后访问的时候，通过这个区分属性来收窄类型：

const currentBanner = mybanners[0];
if (currentBanner?.type === 'image') {
  // 这里TS明确知道currentBanner是ImageBanner类型
  console.log(currentBanner.image.src);
} else if (currentBanner?.type === 'video') {
  // 这里TS明确知道currentBanner是VideoBanner类型
  console.log(currentBanner.videoUrl);
}

这种方案不仅解决了当前的报错，还让你的类型定义更清晰，后续如果要加TextBanner之类的新类型，只要加对应的type区分符就行，非常灵活。

方案三：类型断言（不推荐常规使用） #

如果你非常确定当前的Banner是某个具体类型，也可以用类型断言来绕过TS的检查，但这种方式要谨慎用，因为它会跳过类型安全校验，容易引入bug：

// 断言为ImageBanner类型
console.log((mybanners[0] as ImageBanner)?.image?.src);
// 断言为VideoBanner类型
console.log((mybanners[0] as VideoBanner)?.videoUrl);

这种方式适合临时调试或者你100%确定当前值类型的场景，不建议作为常规写法。

总结一下，优先推荐方案二（加区分符的联合类型），既能保证类型安全，又让代码结构更清晰；如果是简单场景，方案一的in操作符也足够好用；方案三尽量少用哦。

内容来源于stack exchange