React + TypeScript常用規(guī)范

注釋

文件的注釋

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

函數(shù)的注釋

/**
 * 函數(shù)名稱
 * @param  {參數(shù)類型}  參數(shù)名  參數(shù)說明
 * @return {返回值類型} 返回值說明
 */

業(yè)務(wù)代碼的注釋
```
/*業(yè)務(wù)代碼注釋*/
```

變量注釋

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

引用順序

先引用外部組件庫,再引用當(dāng)前組件、塊級組件, 然后是 common 里的公共函數(shù)庫，最后是 css 樣式
interface聲明順序

經(jīng)常用到的三種類型智政，只讀參數(shù)放第一位阐斜，必選參數(shù)第二位皱蹦，可選參數(shù)次之
```
interface iProps {
  readonly num: number;
  name: string;
  width?: number;
}
```

setState有三種用法

// 對象
this.setState({

})

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

// 第二個(gè)參數(shù)眷蜈，一般是用于在setState之后做一些操作
this.setState({
  a: 100
}, () => {
  // TODO
})

用函數(shù)式組件取代在當(dāng)前組件里面寫方法

// 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>
    )
  }
}

空格
- 二元和三元運(yùn)算符兩側(cè)必須有一個(gè)空格沪哺，一元運(yùn)算符與操作對象之間不允許有空格
```
// bad
++ a;
b ++;
c = a?1:2;

// good
++a;
b++;
c = a ? 1 : 2;
```
- 用作代碼塊起始的左花括號 { 前必須有一個(gè)空格
```
// bad
if (){
}

function func(){
}

// good
if () {
}

function func() {
}
```
- if / else / for / while / function / switch / do / try / catch / finally 關(guān)鍵字后，必須有一個(gè)空格
```
// bad
if() {
}

function() {
}

// good
if () {
}

function () {
}
```
- 在對象創(chuàng)建時(shí)酌儒，屬性中的":"之后必須有空格辜妓，":" 之前不允許有空格
```
// bad
var obj = {
    a : 1
};

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

最后編輯于：2020.04.13 13:42:43

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

React + TypeScript常用規(guī)范

注釋

引用順序

interface聲明順序

setState有三種用法

用函數(shù)式組件取代在當(dāng)前組件里面寫方法

空格