javascript - 在遍历 Object.entries 时，Flow 似乎假定了错误的类型

Question

编辑:因为这似乎是一个错误，我在 Github 上打开了一个问题 #4997

在下面的例子中，Flow 似乎假设 label 是 mixed 类型，即使 Props 声明和匿名函数声明都将它绑定(bind)到 节点。我错过了什么？

/* @flow */
import React from 'react';
import type { Node } from 'react';

type Props = {
  values: { [string]: Node },
  /* … */
};

export default class SelectButtons extends React.Component<Props> {
  /* … */

    createButtons(): Array<Node> {
    return Object.entries(this.props.values).map(
      ([value: string, label: Node], index: number): Node => (
        <button>
          {label}
        </button>
      ),
    );
  }
}

这是错误信息:

             v------
 44:         <button
 45:           onClick={() => this.choose(value)}
 46:           key={index}
 47:           className={this.block('option', { selected: value === this.state.value })()}
 48:         >
             ^ React element `button`
             v------
 44:         <button
 45:           onClick={() => this.choose(value)}
 46:           key={index}
 47:           className={this.block('option', { selected: value === this.state.value })()}
 48:         >
             ^ React element `button`. This type is incompatible with
                v
170:     props: {
171:       children?: React$Node,
172:       [key: string]: any,
173:     },
         ^ object type. See lib: /tmp/flow/flowlib_3bead812/react-dom.js:170
  Property `children` is incompatible:
     49:           {label}
                    ^^^^^ mixed. This type is incompatible with
    171:       children?: React$Node,
                          ^^^^^^^^^^ union: undefined | null | boolean | number | string | type application of type `React$Element` | type application of identifier `Iterable`. See lib: /tmp/flow/flowlib_3bead812/react-dom.js:171
      Member 1:
       15:   | void
               ^^^^ undefined. See lib: /tmp/flow/flowlib_3bead812/react.js:15
      Error:
       49:           {label}
                      ^^^^^ mixed. This type is incompatible with
       15:   | void
               ^^^^ undefined. See lib: /tmp/flow/flowlib_3bead812/react.js:15
      Member 2:
       16:   | null
               ^^^^ null. See lib: /tmp/flow/flowlib_3bead812/react.js:16
      Error:
       49:           {label}
                      ^^^^^ mixed. This type is incompatible with
       16:   | null
               ^^^^ null. See lib: /tmp/flow/flowlib_3bead812/react.js:16
      Member 3:
       17:   | boolean
               ^^^^^^^ boolean. See lib: /tmp/flow/flowlib_3bead812/react.js:17
      Error:
       49:           {label}
                      ^^^^^ mixed. This type is incompatible with
       17:   | boolean
               ^^^^^^^ boolean. See lib: /tmp/flow/flowlib_3bead812/react.js:17
      Member 4:
       18:   | number
               ^^^^^^ number. See lib: /tmp/flow/flowlib_3bead812/react.js:18
      Error:
       49:           {label}
                      ^^^^^ mixed. This type is incompatible with
       18:   | number
               ^^^^^^ number. See lib: /tmp/flow/flowlib_3bead812/react.js:18
      Member 5:
       19:   | string
               ^^^^^^ string. See lib: /tmp/flow/flowlib_3bead812/react.js:19
      Error:
       49:           {label}
                      ^^^^^ mixed. This type is incompatible with
       19:   | string
               ^^^^^^ string. See lib: /tmp/flow/flowlib_3bead812/react.js:19
      Member 6:
       20:   | React$Element<any>
               ^^^^^^^^^^^^^^^^^^ type application of type `React$Element`. See lib: /tmp/flow/flowlib_3bead812/react.js:20
      Error:
       49:           {label}
                      ^^^^^ mixed. Inexact type is incompatible with exact type
       20:   | React$Element<any>
               ^^^^^^^^^^^^^^^^^^ exact type: object type. See lib: /tmp/flow/flowlib_3bead812/react.js:20
      Member 7:
       21:   | Iterable<React$Node>;
               ^^^^^^^^^^^^^^^^^^^^ type application of identifier `Iterable`. See lib: /tmp/flow/flowlib_3bead812/react.js:21
      Error:
       49:           {label}
                      ^^^^^ mixed. This type is incompatible with
       21:   | Iterable<React$Node>;
               ^^^^^^^^^^^^^^^^^^^^ $Iterable. See lib: /tmp/flow/flowlib_3bead812/react.js:21
        Property `@@iterator` is incompatible:
           21:   | Iterable<React$Node>;
                   ^^^^^^^^^^^^^^^^^^^^ property `@@iterator` of $Iterable. Property not found in. See lib: /tmp/flow/flowlib_3bead812/react.js:21
           49:           {label}
                          ^^^^^ mixed

Answer 1

现在，我假设这是一个错误。如果您认为我说的不对，并且有更好的答案，请尽管回答，我会欣然采纳!

我认为这是一个错误，因为有以下解决方法:

createButtons(): Array<Node> {
  return Object.keys(this.props.values).map((value: string, index: number): Node => (
    <button>
      {this.props.values[value]}
    </button>
  ));
}

通过直接引用对象，而不是用 Object.entries 遍历它, flow 现在采用正确的类型。

编辑:正如我对此多加思考的那样，问题在于数组的类型，以及 Flow 中的数组只能为其元素携带一种类型的事实。

Object.entries() 的回调参数类型为 Array<mixed> => void .一个理想的类型是 Array<[K, V]> => void , 其中K和 V分别是对象的键和值类型(我认为 K 始终是 string。)

这将需要异构集合，其中 Array<[K, V]>包含第一个元素类型为 K 的所有长度为 2 的数组第二个类型 V .这可能需要 Flow(当前)无法提供的一些类型级运算符和更高级的类型。

使用 Object.keys 的解决方法有效，因为 Object.keys不需要异构数组(所有键都是同一类型)但是如果你的对象看起来不像 { [string]: X } 它可能会失败，而是具有不同类型的值(例如 { foo: number, bar: string } ，使其(再次)成为一个异构集合。