解决 __typename 联合

Question

假设我有这个工会：

export type IBookmarkItemFragment =
  | ({ __typename: "Story" } & {
      story: number;
    })
  | ({ __typename: "Product" } & {
      product: number;
    })
  | ({ __typename: "Project" } & {
      project: number;
    });

我想要基于__typeame 的.filter 和.map。比如：

bookmarks
  .filter(bookmark => {
    return bookmark.__typename === "Project";
  })
  .map(project => {
    return project.project;
  });

我如何确保在地图中project 将解析为：

({ __typename: "Project" } & {
  project: number;
})

Answer 1

您必须明确声明该函数是带有注释的类型保护：

export type IBookmarkItemFragment =
| ({ __typename: "Story" } & {
    story: number;
    })
| ({ __typename: "Product" } & {
    product: number;
    })
| ({ __typename: "Project" } & {
    project: number;
    });

declare let bookmarks: IBookmarkItemFragment[]
bookmarks
.filter((bookmark):bookmark is Extract<IBookmarkItemFragment, { __typename: "Project"}>   => {
    return bookmark.__typename === "Project";
})
.map(project => {
    return project.project;
});

或者只是为了好玩，如果我们想概括类型守卫，我们可以创建一个守卫工厂，它适用于任何常见的标记联合。

export type IBookmarkItemFragment =
| ({ __typename: "Story" } & {
    story: number;
    })
| ({ __typename: "Product" } & {
    product: number;
    })
| ({ __typename: "Project" } & {
    project: number;
    });

function guardFactory<T, K extends keyof T, V extends string & T[K]>(k: K, v: V) : (o: T) => o is Extract<T, Record<K, V>> {
    return function (o: T): o is Extract<T, Record<K, V>> {
        return o[k] === v
    }
}
declare let bookmarks: IBookmarkItemFragment[]
bookmarks
.filter(guardFactory("__typename", "Project"))
.map(project => {
    return project.project;
});