如何为某种类型的元素指定过滤数组的方法？

Question

我正在尝试实现一个函数，它将由不同元素组成的数组拆分为特定类型的元素数组（在函数调用中指定）。这是简化的代码：

export enum GenericElementType {
  ONE = 'type one',
  TWO = 'type two'
}

export interface TypeA {
  id: string;
  type: GenericElementType.ONE;
}

export interface TypeB {
  id: string;
  type: GenericElementType.TWO;
}

export type ElementType = TypeA | TypeB;
const arrayOfElements: (DFDElementType)[] = [];

function filterElementsOfCertainType<T extends ElementType>
  (elements: (ElementType)[], type: GenericElementType): T[] {
  return elements.filter((element: ElementType) => element.genericType === type);
}

这会导致错误，因为并非ElementType 中的每个元素都与返回类型T 匹配。我将如何实现正确键入的此功能？

这是一个Playground 链接。

另一个使用泛型类型的Playground link。

Answer 1

假设您的“特定类型”是您提供的，返回 ElementType[]，并将 element.type 与类型进行比较。认为这应该有效。干杯

编辑：

我认为你应该考虑一下模式。从你的最后一个游乐场。 elementOfTypeA: TypeA[] 应该是 elementOfTypeA: ElementType[]，你已经给出了所需的类型作为参数。用更简单的逻辑来说，这永远行不通：

interface  person{
  id: string;
}
type teacher = person | number;

const randomVariable: person = 3;

虽然，这会：

interface  person{
  id: string;
}
type teacher = person | number;

const randomVariable: teacher = 3;

最后的手段：

function filterElementsOfCertainType<T extends ElementType>
  (elements: any[], type: GenericElementType): T[] {
  return elements.filter((element: T) => element.type !== undefined && element.type === type);
}

然后 const elementOfTypeA: TypeA[] = filterElementsOfCertainType([a, b, c], GenericElementType.TWO);将工作。

这似乎也是打字稿文档希望您这样做的方式。 https://www.typescriptlang.org/docs/handbook/advanced-types.html

选中“用户定义的类型保护”。干杯伙伴。

playground

Answer 2

这个playground 应该可以工作。但是，这是正确的输入：

function filterElementsOfCertainType<T extends ElementType>
  (elements: T[], type: GenericElementType): T[] {
  return elements.filter((element: T) => element.type === type);
}