React组件迁移Flow：PropTypes.func对应的函数类型写法是什么？

嘿，我正好做过PropTypes到Flow的迁移，来给你说清楚怎么写！

在Flow里，对应PropTypes.func的写法分两种场景，取决于你要不要约束函数的参数和返回值：

1. 基础写法（不限制参数/返回值） #

如果你只是想标记这个prop是个函数，和PropTypes.func一样不做更严格的约束，可以直接用Function类型：

import * as React from 'react'

type Props = {
  doSomething: Function,
}

class MyComponent extends React.Component<Props> {}

2. 严谨写法（指定参数和返回值） #

Flow的优势就是强类型检查，所以更推荐你明确函数的参数类型和返回值类型，这样能提前发现很多潜在问题。举几个常见例子：

• 无参数、无返回值的函数：

  type Props = {
    doSomething: () => void,
  }
  

• 接受一个字符串参数、返回布尔值的函数：

  type Props = {
    doSomething: (input: string) => boolean,
  }
  

• 接受多个参数的函数（比如数字和布尔值，返回字符串）：

  type Props = {
    doSomething: (count: number, isEnabled: boolean) => string,
  }
  

总结 #

如果只是简单替代PropTypes.func，用Function就可以；但为了充分利用Flow的类型检查能力，强烈建议你定义清楚函数的参数和返回值类型，这也是迁移到Flow的核心价值之一～

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