React与typescript的结合

去年年前学过一次react,结果半年不用,忘了一半,这次想着配合后端RESTFUL API开发一个
站点玩玩,又把react从工具箱里找了出来,然后发现Typescript发展潜力很大,就去学了一波
TS,学完TS,顺带接触了Webpack等等一系列乱七八糟的基础知识。本文,记录React和TS结合的一些知识点。

原则

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

Tips

  • 不可改变的state,提前用readonly声明
  • 函数式组件的声明,使用
1
2
3
// SFC: stateless function components
// v16.7起,由于hooks的加入,函数式组件也可以使用state,所以这个命名不准确。新的react声明文件里,也定义了React.FC类型^_^
const List: React.SFC<IProps> = props => null
  • 关于类组件,只要内部使用了state和props,就需要在组件声明的时候指明类型

他山之石