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 的文字type ，以便具有可區分的聯合（假設您可能有這些類型的別名或接口）。

filter將采用自定義類型保護，但不幸的是無法從使用中推斷出類型保護，因此 function val => val.type === 'foo'不會縮小類型。

我們可以做的是顯式注釋 function 以讓編譯器知道我們正在縮小 function 中的類型：

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

游樂場鏈接

不確定它比斷言好得多，但不幸的是，這已經盡可能接近了。