TypeScript接口疑问：如何在单独组件访问新增的movieName属性

你当前的情况并不是操作错误，只是接口设计没有贴合你“单独组件对应明确API返回”的需求。以下是两种优化方案：

方案一：为不同API创建专属接口 #

既然两个API返回的结构明确区分（一个可能无movieName，一个必定有），直接分别定义对应的类型即可：

// 保留基础接口不变
interface ActorAddress {
  city: string;
  state: string;
  country: string;
}

interface ActorDescription {
  name: string;
  hobby: string;
}

interface ActorByMovie extends ActorDescription {
  movieName: string;
}

// 对应原API：actorWiki可能是两种类型之一
interface MovieStar {
  birth: ActorAddress;
  actorWiki: ActorDescription | ActorByMovie;
}

// 对应新API：actorWiki必定包含movieName
interface MovieStarWithMovie {
  birth: ActorAddress;
  actorWiki: ActorByMovie;
}

在需要使用带movieName数据的组件中，直接用MovieStarWithMovie作为类型，此时actorWiki的类型明确为ActorByMovie，可以直接访问movieName，无需额外类型判断。

方案二：用泛型复用接口结构 #

如果两个API的核心结构高度一致，只是actorWiki的类型不同，可以用泛型来减少重复代码：

interface ActorAddress {
  city: string;
  state: string;
  country: string;
}

interface ActorDescription {
  name: string;
  hobby: string;
}

interface ActorByMovie extends ActorDescription {
  movieName: string;
}

// 通用泛型接口
interface MovieStar<T extends ActorDescription> {
  birth: ActorAddress;
  actorWiki: T;
}

// 原API对应的类型
type BasicMovieStar = MovieStar<ActorDescription>;
// 新API对应的类型
type MovieStarWithMovie = MovieStar<ActorByMovie>;

这种方式既复用了接口结构，又能明确每个API对应的类型细节，同样能让目标组件直接访问movieName。

补充说明 #

你之前用联合类型ActorDescription | ActorByMovie是适合“同一组件需要处理两种数据场景”的情况，但你的需求是单独组件对应明确的带movieName的数据，所以不需要保留联合类型，直接指定明确的子类型即可解决无法访问movieName的问题。

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