React + TypeScript常用规范

注释

• 文件的注释

  /**
   * @description xxxxxx
   * @author danae
   * @date 2020/01/01
   */
  

• 函数的注释

  /**
   * 函数名称
   * @param  {参数类型}  参数名  参数说明
   * @return {返回值类型} 返回值说明
   */
  

• 业务代码的注释

  /*业务代码注释*/
  

• 变量注释

  interface IState {
    // 名字
    name: string;
  }
  

引用顺序

先引用外部组件库,再引用当前组件、块级组件, 然后是 common 里的公共函数库，最后是 css 样式

interface声明顺序

经常用到的三种类型，只读参数放第一位，必选参数第二位，可选参数次之

interface iProps {
  readonly num: number;
  name: string;
  width?: number;
}

setState有三种用法

// 对象
this.setState({

})

// 函数，一般是用于在setState之前做一些操作
this.setState(
  () => {
    // TODO
    return {
      a: 100
    }
  }
)

// 第二个参数，一般是用于在setState之后做一些操作
this.setState({
  a: 100
}, () => {
  // TODO
})

用函数式组件取代在当前组件里面写方法

// bad
  setHeader = () => {
    return (<div />)
  }
  render(){
    return(
      <div>
        this.setHeader()
      </div>
    )
  }
  
// good
 function SetHeader(props) =  {
    return (<div />)
  }
class Component extends React.Component<iProps, iState>{  
  render () {
    return(
      <div>
        <SetHeader />
      </div>
    )
  }
}

空格

• 二元和三元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格

  // bad
  ++ a;
  b ++;
  c = a?1:2;
  
  // good
  ++a;
  b++;
  c = a ? 1 : 2;
  

• 用作代码块起始的左花括号 { 前必须有一个空格

  // bad
  if (){
  }
  
  function func(){
  }
  
  // good
  if () {
  }
  
  function func() {
  }
  
  

• if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格

  // bad
  if() {
  }
  
  function() {
  }
  
  // good
  if () {
  }
  
  function () {
  }
  

• 在对象创建时，属性中的":"之后必须有空格，":" 之前不允许有空格

  // bad
  var obj = {
      a : 1
  };
  
  // good
  var obj = {
      a: 1
  };