具有属性传播的反应组件上的可选属性的流类型

Question

尝试使用流在反应组件上键入属性很有趣，其中属性可以是枚举或对象。

似乎当我使用{...spread} 作为可以具有多种类型（联合）的可选属性之后的属性时，流程总是指出它们不兼容。

这个想法是允许属性是来自枚举的字符串值，或者值的类型也必须是该枚举的对象。

如果将{...spread} 放在属性之前，它确实可以工作，但这不是所需的功能。

例如（Try Flow）：

/* @flow */
import React from 'react';

type _TextAlign = 'left' | 'center' | 'right';

type TextAlign = _TextAlign | { [key: string]: _TextAlign };

type Props = { textAlign?: TextAlign }

const CStr = (props: Props) => <div textAlign="center" {...props}  />;

给予

8: type Props = {  textAlign?: TextAlign }
                               ^ object type [1] is incompatible with string [2].

Answer 1

查看Props 类型的一些可能值：

• { 'textAlign': 'left' }
• { 'textAlign': { 'a': 'right', 'b': 'center' }

所以当你到达这部分时：

<div textAlign="center" {...props}  />;

您收到错误，因为 { 'a': 'right', 'b': 'center' } 不是字符串，也不是 textAlign 的有效值。

您可以将所有可能的值构建为具有键和值的类型：

type TextAlign = { textAlign?: _TextAlign } | { [key: string]: _TextAlign };
type Props = { ...TextAlign };

但这实际上是一样的：

type TextAlign = { [key: string]: _TextAlign };
type Props = { ...TextAlign };

如果您随后也允许任何其他密钥，则指定可选的 'textAlign' 密钥没有任何好处。