TypeScript中map遍历联合类型数组条件渲染的类型判断问题

你代码里的if (item is TypeSection)属于语法错误：is是TypeScript的类型谓词关键字，只能用于自定义类型守卫函数的返回值类型标注，不能直接写在if条件表达式里，因此这段判断不会触发TS的自动类型收窄，你后续才需要用as做强制类型断言——这种写法没有运行时校验，存在类型安全隐患，还漏了分支组件的key属性，会触发React渲染警告。

推荐写法 #

1. 快速实现：用in操作符检查独有属性 #

这是最简便的零额外封装方案，只要找到两个类型的独有属性，直接判断属性是否存在于当前项，TS会自动完成类型收窄，完全不需要as强转：

{sectionedListItems.map((item: TypeDataEntityTypePost | TypeSection) => {
  // 假设title是TypeSection独有的属性，id是Post类型独有的属性
  if ('title' in item) {
    // 此处TS自动将item类型推导为TypeSection
    return <Typography key={`section-${item.title}`}>{item.title}</Typography>;
  }
  // 此处TS自动将item类型推导为TypeDataEntityTypePost
  return <PostItem post={item} key={item.id} />;
})}

列表渲染时所有分支返回的根组件都必须加唯一key属性，你原代码里Typography分支缺失key，会导致React渲染性能问题甚至状态错乱。

2. 复用场景：封装自定义类型守卫 #

如果同一份类型判断逻辑要在多处使用，可以封装专门的类型守卫函数，这时候才会用到is关键字：

/**
 * 判断列表项是否为Section类型
 */
function isSectionItem(item: TypeDataEntityTypePost | TypeSection): item is TypeSection {
  // 写实际的运行时校验逻辑，比如判断独有属性存在、或者判断类型标识字段
  return typeof (item as TypeSection).title === 'string';
}

在渲染逻辑中直接调用守卫函数即可：

{sectionedListItems.map((item) => {
  if (isSectionItem(item)) {
    return <Typography key={`section-${item.title}`}>{item.title}</Typography>;
  }
  return <PostItem post={item} key={item.id} />;
})}

避坑提示 #

• 不要滥用as类型断言：它本质是让TS跳过类型校验，一旦实际返回的数据结构和你断言的类型不符，会直接引发运行时报错
• TypeScript的类型系统只在编译阶段生效，编译后所有类型标注都会被擦除，任何类型判断都必须搭配对应的运行时校验逻辑，不能只靠类型标注完成判断

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