在传统Javascript中，React组件由PropTypes声明props的类型，但是在弱类型的Javascript中，PropTypes无法在编辑时提供自动提示和类型校验。在组件拆分非常多的情况下，无疑是导致维护和开发成本上升的重要原因。
import * as React from 'react';
// props类型
interface IProps {
text: string;
}
class HelloWorld extends<IProps> {
render() {
return (
<div>{this.props.text}</div>
);
}
}
正确用法
<HelloWorld text="HelloWorld" />
错误用法，IDE提示缺少text错误
<HelloWorld />
组件的state也可以指定类型，在setState时如果类型错误会自动提示
interface IState {
text: string;
}
class HelloWorld extend React.Component<any, IState>{
state: IState = {
text: 'HelloWorld'
}
}
高阶组件等其他的用法也类似，在声明时需要注意类型。
网友评论