react中优雅的使用typescript

在 react 中使用 ts 的几点原则和变化

1. 所有用到jsx语法的文件都需要以tsx后缀命名
2. 使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！
3. 全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义
4. 对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明

React组件申明分为：类组件和函数式组件

类组件：

 

class App extends Component<IProps, IState> {
  state: IState = {
    //...
  };
  // 如果state很复杂不想一个个都初始化，可以结合类型断言初始化state为空对象或者只包含少数必须的值的对象,如下：
  // readonly state = {} as IState;
}

1. React.Component<IProps, IState>只是标注了基类的state属性类型
2. 使用 class properties 语法对state做初始化时，会覆盖掉Component<P, S>中对state的readonly标识
3. 而当你在子类声明state时，你可以为state标注一个【IState的子类型】作为override。这样，this.state会以子类中的state属性声明作为类型信息的来源。
   //4. 建议使用函数组件，v16.7起，由于hooks的加入

函数式组件：

 

const List: React.FC<IProps> = props => null

建议使用函数组件：

1. v16.7起，由于hooks的加入，函数式组件也可以使用state
2. hooks是比HOC和render props更优雅的逻辑复用方式
3. hooks（主要是useEffect）取代了生命周期的概念（减少API），让开发者的代码更加“声明化”