BlueXIII's Blog

热爱技术,持续学习

0%

研发规约-TypeScript编码风格

参考文档

tslint

命名

  • 类型名使用 PascalCase
  • 接口名前不要加 I
  • 枚举值使用 PascalCase
  • 函数名使用 camelCase
  • 属性和局部变量名使用 camelCase
  • 使用UPPER_SNAKE_CASE来命名常量
  • 私有属性名不要使用 _ 前缀
  • 命名时尽可能地使用全名(而非缩写)

风格

  • 使用单引号括起字符串
  • 总是使用大括号括起循环体和条件体开大括号
  • 总是放在其关联语句的同一行(大括号不换行)
  • 圆括号内侧不留空格;在圆括号内的逗号、冒号和分号后空一格。
  • 每个定义使用单独的语句。
    1
    2
    3
    4
    5
    // BAD: 
    var x = 1, y = 2;
    // GOOD:
    var x = 1;
    var y = 2;
  • const > let > var
  • 当单行无法容下参数声明时, 在多行显示, 且参数必须对齐. 同理, 类成员, 数组成员接口成员也需要对齐
  • 行末是否使用分号,不硬性规定
  • 对于跨越多行的数组字面量, 对象字面量/import/export/type字面量/函数形参列表/函数调用实参等, 都应该尾随逗号
    1
    2
    3
    4
    const trailingWhitespace = {
    foo: 'string',
    bar: 1,
    }

    注释

  • 使用// 作为单行注释, 注释内容前面必须有空格
  • 每个文件开头必须提供关于这个文件的注释.说明文件的内容, TODO, 更新日期, 权限等信息
  • 使用/** …*/作为多行注释, 并使用JSDoc格式对代码进行文档化

箭头函数

  • 只有一个参数时,可以省略括号
    1
    const arrowFunctiono = i => i 
  • 如果可以尽量使用简写的返回
    1
    const shorthandReturno = () => true
  • 别保存 this 的引用。优先使用箭头函数
    1
    2
    3
    4
    5
    function foo() {
    return () => {
    console.log(this)
    }
    }

    函数

  • new 操作始终加上()
  • 使用函数声明代替函数表达式
    1
    2
    3
    4
    // BAD:
    const foo = function () {}
    // GOOD:
    function foo() {}
  • 不要使用 arguments。可以选择 rest 语法 … 替代。
    1
    2
    3
    function concatenateAll(...args) {
    return args.join('');
    }

    对象

  • 只有在必要时, 才添加引号
    1
    2
    3
    4
    const objo = {
    foo: 'string',
    'foo bar': 1,
    }
  • 优先使用object spread 语法
    1
    2
    3
    4
    // BAD:
    let objectAssign = Object.assign({}, obj1)
    // GOOD:
    let objectSpread = { ...obj1 }

    接口

  • 始终显式设置成员的可见性, 这样可以提醒你慎重考虑属性的可见性, 避免将因为省略描述符而将私有成员暴露出去
    1
    2
    3
    4
    5
    class Membero {
    public foo() {
    // do somthing
    }
    }

    操作符/表达式

  • 二元操作符中的字面量应该始终在变量的右边
  • 不要比较boolean 字面量
    1
    2
    3
    4
    //BAD:
    let baz = ok === true ? 'foo' : 'baz'
    // GOOD:
    baz = ok ? 'foo' : 'baz'
  • 当使用if语句比较超过三个时, 考虑使用switch
  • 优先使用字符串模板
    1
    temp = `print${hello} ${world}`

    模块

  • 导入默认导出, 最好匹配库默认的导出名
    1
    2
    3
    4
    // BAD:
    import IReact from 'react'
    // GOOD:
    import React from 'react'
  • 为了减少打包体积, 避免引入整个模块, 而是按需引入需要的子模块. 典型的应用就是lodash
    1
    2
    3
    4
    // BAD:
    import _ from 'lodash'
    // GOOD:
    import findIndex from 'lodash/findIndex'

    其它

  • 除非类型/函数需要在多个组件中共享,否则不要导出(export)
  • 在文件中,类型定义应该放在最前面
  • 使用 undefined,不要使用 null