React Native && TypeScript: 三、TypeScript React组件

在传统Javascript中，React组件由PropTypes声明props的类型，但是在弱类型的Javascript中，PropTypes无法在编辑时提供自动提示和类型校验。在组件拆分非常多的情况下，无疑是导致维护和开发成本上升的重要原因。

import * as React from 'react';

// props类型
interface IProps {
  text: string;
}

class HelloWorld extends {
  render() {
    return (
      
{this.props.text}
    );
  }
}

正确用法

错误用法，IDE提示缺少text错误

组件的state也可以指定类型，在setState时如果类型错误会自动提示

interface IState {
  text: string;
}

class HelloWorld extend React.Component{
  state: IState = {
    text: 'HelloWorld'
  }
}

高阶组件等其他的用法也类似，在声明时需要注意类型。