类式React组件Flow类型标注冗余：是否有更优修复方案？

你用属性语法定义onClick避免重复调用.bind(this)的思路没问题，但Flow对导出类的实例属性要求显式类型标注，你提到的那种重复写参数类型的冗余写法并不是唯一正确解法，下面是两种更简洁的方案：

方案1：分离类型声明与赋值 #

把属性的类型声明单独写在赋值前面，只需要定义一次完整类型，函数内部的参数类型可以靠Flow自动推断：

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

export default class App extends React.Component<{}> {
    onClick: (SyntheticEvent<HTMLButtonElement>) => void;
    onClick = (event) => {
        console.log(event);
    };

    render(): React.Node {
        return <button onClick={this.onClick}>test</button>
    }
}

方案2：使用React内置事件处理类型别名 #

React提供了专门的事件处理类型，比如React.MouseEventHandler<HTMLButtonElement>，这个类型已经包含了按钮点击事件的参数类型，直接用它标注属性即可，完全不用重复写参数类型：

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

export default class App extends React.Component<{}> {
    onClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
        console.log(event);
    };

    render(): React.Node {
        return <button onClick={this.onClick}>test</button>
    }
}

报错原因说明 #

Flow在生成模块的类型接口时，无法自动完全推断类实例属性（通过赋值语法定义的属性）的类型，因此要求显式标注，但不需要像你之前那样重复定义参数类型，只要给属性本身标注一次完整类型即可。

内容的提问来源于stack exchange，提问作者Nick