如何在TypeScript中提取嵌套联合类型里的data类型？

你生成的GetOffersForMembershipQuery里，offers是一个联合类型，只有当分支的__typename为QueryOffersSuccess时才存在data属性，直接用GetOffersForMembershipQuery["offers"]["data"]会因为其他分支没有data而报错。可以用TypeScript的内置类型工具或自定义条件类型来解决：

方法一：使用内置Extract类型（推荐） #

直接用TypeScript自带的Extract从联合类型中筛选出目标分支，再提取data类型：

// 先筛选出__typename为QueryOffersSuccess的分支
type QueryOffersSuccess = Extract<GetOffersForMembershipQuery["offers"], { __typename?: "QueryOffersSuccess" }>;
// 提取该分支的data类型
type OfferData = QueryOffersSuccess["data"];

方法二：一行简化写法 #

把上面两步合并成一行：

type OfferData = Extract<GetOffersForMembershipQuery["offers"], { __typename?: "QueryOffersSuccess" }>["data"];

方法三：自定义类型工具（更直观） #

如果需要更清晰的类型逻辑，可以自定义一个类型工具来筛选指定__typename的分支：

// 自定义类型工具：从联合类型中提取匹配指定__typename的分支
type ExtractByTypename<T, TargetTypename extends string> = T extends { __typename?: TargetTypename } ? T : never;

// 提取目标分支并获取data类型
type OfferData = ExtractByTypename<GetOffersForMembershipQuery["offers"], "QueryOffersSuccess">["data"];

这些方法都能精准提取到QueryOffersSuccess分支下的data数组类型，避免了联合类型中其他分支的干扰。

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