TypeScript中useState联合数组类型访问属性报错如何解决？

问题背景 #

开发影视图库项目时，通过API获取电影（MovieData类型，名称存在title属性）和剧集（TVData类型，名称存在name属性）数据，使用useState维护数组状态：

const [movies, setMovies] = useState<MovieData[] | TVData[]>([]);

在映射数组生成海报缩略图时，src属性因两种类型都包含poster_path和backdrop_path可正常工作，但alt属性触发TypeScript报错——MovieData不存在name属性，TVData不存在title属性。

解决方案 #

以下几种方法可解决该类型兼容问题：

1. 自定义类型守卫（最安全推荐）

编写类型守卫函数明确区分当前项的类型，再获取对应名称：

// 定义类型守卫
function isMovieData(item: MovieData | TVData): item is MovieData {
  return 'title' in item;
}

// 映射时使用
{movies.map((movie, id) => (
  <CardMedia
    // 其他属性...
    alt={isMovieData(movie) ? movie.title : movie.name}
    key={id}
  />
))}

2. 可选链+空值合并（简洁快速）

利用TypeScript的可选链和空值合并操作符，直接尝试获取两个属性，兜底默认值：

alt={movie.title ?? movie.name ?? '未命名媒体'}

3. 类型断言（适合确定数组类型场景）

如果能明确当前数组全为MovieData或TVData，可使用类型断言，但需注意类型安全：

// 确定是电影数组时
alt={(movie as MovieData).title}
// 确定是剧集数组时
alt={(movie as TVData).name}

4. 扩展类型定义（长期维护友好）

给MovieData和TVData添加可选的互补属性，让类型本身兼容：

// 修改原始类型定义
interface MovieData {
  title: string;
  name?: never; // 明确MovieData不会有name属性
  poster_path: string;
  backdrop_path: string;
  // 其他属性...
}

interface TVData {
  name: string;
  title?: never; // 明确TVData不会有title属性
  poster_path: string;
  backdrop_path: string;
  // 其他属性...
}

此时TypeScript能自动推断出当前项对应的名称属性，无需额外处理。

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