使用 Flow 验证对象映射答案

【问题标题】：Validating Object Map using Flow使用 Flow 验证对象映射
【发布时间】：2018-05-29 01:29:06
【问题描述】：

我有以下几点：

// @flow

import React from 'react';

type IconMap = {
  [name: string]: {}
};

export const icons: IconMap = {
  circle: {
    viewbox: '0 0 473.66 473.66',
    path(props) {
      return (
        <g id="Layer_2" data-name="Layer 2" {...props}>
          <g id="Layer_1-2" data-name="Layer 1">
            <circle cx="236.83" cy="236.83" r="236.83" />
          </g>
        </g>
      );
    }
  }
};

首先，如何使上面的类型IconMap 不接受未密封的对象作为值，而是接受{ viewbox: string, path: function }？

其次，如果我尝试如下调用icons：

const obj = icons['circle']

如果circle 不是 icons 的键之一，我如何确保上述操作在编译时失败？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

对于您的第一个问题，您可以：

type IconMap = {
  [name: string]: {|
    viewbox: string,
    path: Object => React$Node
  |}
};

对于第二个问题，据我所知，不可能在编译时这样做。

React$Node 定义为 here，默认情况下随 Flow 一起提供。或者你可以

import type {Node} from 'react

【讨论】：

谢谢！你的意思是写React.Node？对于第二部分，我是否可以至少在运行时循环 icons 对象键并在给定字符串不是这些键时提供默认值？
@Sammy 是的，但这是你对常规 JS 所做的事情。没有必要用流量来做。我还认为React$Node 可能被硬编码为 Flow 哈哈。试试看。
对不起，我不知道错误可能是什么。当我尝试React.Node 我得到Error:(8, 27) Cannot get React.Node because property Node is missing in object type [1].
@sammy 我得到了同样的东西，这就是我使用 $ 变体的原因，这意味着同样的事情。 stackoverflow.com/questions/48780001/… 解决您的问题。 TL;博士import type {Node} from 'react'
@Sammy 无需道歉。这令人困惑。很高兴我能帮上忙。