我可以为功能UI组件声明props类型吗?

Question

换句话说，我可以用React + TypeScript或React + Flow做这样的事情吗?

function Foo(rect:Rect) {
   return <div><span>{rect.x}</span><span>{rect.y}</span></div>;
}

而不是:

function Foo({x,y}:{x:number,y:number}) {
   return <div><span>{x}</span><span>{y}</span></div>;
}

Answer 1

创建它们作为函数的属性。看到https://facebook.github.io/react/docs/reusable-components.html stateless-functions

function YourComponent(props) {}
YourComponent.propTypes = {
  someProp: React.PropTypes.object.isRequired
};
export default YourComponent;

在Javascript中函数就是对象

Answer 2

这是我一直在寻找的答案:

// TypeScript
class Foo extends React.Component<FooProps, FooState> {}
// Flow
class Foo extends React.Component {
  state: FooState;
  props: FooProps;
}