arrays - Typescript:过滤条件类型数组并具有正确的返回类型

Question

我想过滤条件类型数组并具有正确的返回类型。例如，采用以下代码:

const foo = {
  type: "foo" as const,
  foo: 123
}

const bar = {
  type: "bar" as const,
  bar: 123
}

const arr = [foo, bar]

const filteredArr = arr.filter(val => val.type === 'foo');

filteredArr.map(val => {
  val.foo //Typescript blows up! Property foo does not exist on type
})

我想出的唯一解决方案是转换过滤后的数组:

type Foo = typeof foo;

const filteredArr = arr.filter(val => val.type === 'foo') as Foo[];

但似乎应该有一种方法， typescript 足够聪明，可以推断数组已被过滤为仅 Foo[]。

也许用户定义的类型保护有一些棘手的用法？

Answer 1

首先，foo和bar的类型应该保留type的文字类型，以便有一个可区分的联合(假设你可能无论如何都有这些的类型别名或接口(interface))。

filter 将采用自定义类型保护，但遗憾的是无法从使用中推断出类型保护，因此函数 val => val.type === 'foo' 不会缩小类型范围。

我们可以做的是显式注释函数，让编译器知道我们正在缩小函数的类型范围:

const foo = {
  type: "foo" as const, // added to preserve ,
  foo: 123
} 

const bar = {
  type: "bar" as const, // added to preserve 
  bar: 123
} 

const arr = [foo, bar]

const filteredArr = arr.filter((val): val is typeof foo => val.type === 'foo')

filteredArr.map(x => x.foo) // ok

Playground Link

不确定它比断言好多少，但不幸的是，这已经是你能得到的最接近的结果了。