React+TS 规范

注释

1.定义变量、函数、对象、接口等尽可能使用块级注释/** */来代替行内注释//，这样vscode才能显示出注释提示，提高效率。

// NOT GOOD
export const PAY_STATUS = {
  // 未支付
  NO_PAY: {
    id: 0,
    name: '未支付'
  },

  // 已支付
  PAYED: {
    id: 1,
    name: '已支付'
  },
}

// GOOD
export const PAY_STATUS = {
  /** 未支付 */
  NO_PAY: {
    id: 0,
    name: '未支付'
  },

  /** 已支付 */
  PAYED: {
    id: 1,
    name: '已支付'
  },
}

常量

1.在写函数或组件prop类型等情况下，如果是枚举类型，尽量不要直接用数字来定义，可以用字符串或者常量代替，方便调用时能看到提示。

// Not Good
const setCardType = (type: 1 | 2 | 3) => {...}
setCardType(1)

// Good
const setCardType = (type: 'order' | 'product') => {...}
setCardType('order')

// Good
const setCardType = (type: CARD_TYPE_ID_TYPE) => {...}
setCardType(CARD_TYPE.ORDER.id)

页面路径命名

1. 采用小写方式，以中划线分隔，比如：https://xtxpjw.cn/order-detail。

{
  routeProps: {
    path: 'order-detail', // 页面路径
    element: <OrderDetail /> // 页面组件
  },
  title: '订单详情'
}