解决__typename联合

Question

假设我有一个工会：

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

我要.filter和.map基于__typeame。类似于：

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;
});