Question

可以在@ flowtype.org/try找到示例。在这里，我希望条件中的类型细化可以在两个示例中使用，而它只适用于更简单的一个。当我介绍Array.filter时，细化不会生效。这是Flow中的错误还是我的误用？

/* @flow */

export type Action =
    {| type: 'ACTION1', payload: string |}
  | {| type: 'ACTION2', payload: number |}
  | {| type: 'ACTION3' |}

const things = (state: Array<number> = [], action: Action): Array<number> => {
  if (action.type === 'ACTION2') {
    return state.filter((thing) => { return thing !== action.payload })
  } else {
    return state
  }
}

things([1, 5], { type: 'ACTION2', payload: 5 })

const add = (state: number = 0, action: Action): number => {
  if (action.type === 'ACTION2') {
    return state + action.payload
  } else {
    return state
  }
}

add(0, { type: 'ACTION2', payload: 5 })

生成以下错误：

10:     return state.filter((thing) => { return thing !== action.payload })
                                                                 ^ property `payload`. Property not found in
6:   | {| type: 'ACTION3' |}       ^ object type

Answer 1

这只是Flow积极地使类型细化无效的问题。 Flow不知道filter将对您传递的回调做什么。也许它会保存并稍后调用它。 Flow也没有意识到没有其他任何重新分配action。就其而言，在调用回调时，action可能会被重新分配给{type: 'ACTION3'}。将有效负载拉出const可以解决问题：

const payload = action.payload;
return state.filter((thing) => { return thing !== payload })

流量联合类型细化被过滤器

1 个答案: