在 Typescript 中使用 map / filter 处理过滤类型

Question

我意识到这个问题不是特定于打字稿的，但是如果不注释下面的行 (B) 会给出一个错误Property 'length' does not exist on type 'String | Number' Property 'length' does not exist on type 'String | Number' 。 有没有办法让打字稿知道所有元素现在只是字符串（在过滤完成后）？

const array_: (String| Number)[] = [99, "Hello, World!"];

array_.map((e) => {if (typeof e === "string") console.log(e.length)}) // A

// array_.filter((e) => typeof e === "string").map((e) => {console.log(e.length)}) // B

https://onecompiler.com/typescript/3y88gzecj

Answer 1

当然，您需要使用转换filter回调到 typeguard：

const array_: (String | Number)[] = [99, "Hello, World!"];

array_.map((e) => { if (typeof e === "string") console.log(e.length) }) // A

array_.filter(
  (e): e is string => typeof e === "string").map((e) => {
    console.log(e.length)
  }) // ok

回调(e): e is string => typeof e === "string"

请参阅文档游乐场

Answer 2

使用类型谓词让 TS 知道你在做什么

const array_: (String| Number)[] = [99, "Hello, World!"];

const isString = (item: String | Number): item is String => typeof item === "string"

array_.map((e) => {if (typeof e === "string") console.log(e.length)})

array_.filter(isString).map((e) => {console.log(e.length)})