React项目从Javascript到Typescript的迁移经验总结

对于有状态组件，主要注意三点：

1. props和state都要做类型限制
2. state用readonly限制“this.state=**”的操作
3. 对event对象做类型限制 

import React,{MouseEvent} from "react";  
interface TeachersProps{  
  user:User  
}  
interface TeachersState{  
  pageNo:number,  
  pageSize:number,  
  total:number,  
  teacherList:{  
    id: number,  
    name: string,  
    age: number,  
    sex: number,  
    tel: string,  
    email: string  
  }[]  
}  
export default class Teachers extends React.PureComponent<TeachersProps,TeachersState> {  
    readonly state = {  
        pageNo:1,  
        pageSize:20,  
        total:0,  
        userList:[]  
    }  
    handleClick=(e:MouseEvent<HTMLDivElement>)=>{  
        console.log(e.target);  
    }  
    //...省略部分代码  
    render(){  
        return <div onClick={this.handleClick}>点击我</div>  
    }  
}  

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!