是否可以有效地扩展 HTMLProps 类型？答案

【问题标题】：Is it possible to effectively extend the HTMLProps type?是否可以有效地扩展 HTMLProps 类型？
【发布时间】：2017-09-11 05:19:43
【问题描述】：

我想做的事情是这样的：

MyButton.jsx

type Props = { foo?: 'x' | 'y' | 'z'; ...HTMLProps<HTMLButtonElement> };

const MyButton = ({ foo = 'y', ...props }: Props) => {
    return (
        <button class={foo} {...props}/>
    )
}

Application.jsx

...
render() {
    <MyButton
        onClick={() => this.setState({ bar: true })}
        foo="z" />
}
...

不幸的是，这种将一种类型或接口的所有内容复制到另一种类型或接口的语法不存在。

FlowType 对 HTML 属性的支持非常有用，我不想将它们全部复制到我自己的 props 定义中，以便将它们传递给子元素 - 相反，我只想添加一些我自己的属性到此列表中，将它们摘下并将剩余的发送到链中。

【问题讨论】：

我在这里要求过类似的东西；很高兴有投票：github.com/facebook/flow/issues/7644

标签： javascript reactjs types jsx flowtype

【解决方案1】：

很遗憾，您不能这样做。 Flowtype 存储库中有一个open issue on making this possible。

一种可能的解决方法是让您的一个道具成为 HTMLProps 类型的对象，其中包含您需要的所有 HTML 属性，并让您的其他道具单独传递。但是，处理起来会有些麻烦。对于这种特定情况，您也可以不使用 Flow 并依赖 React 的基于 PropTypes 的运行时验证，尽管这也会更不方便。

tl;dr: Flow 暂时不支持扩展类型。请求该功能，对相关问题发表评论可能会使其更快发布。

【讨论】：