Technical note

研发规约-TypeScript编码风格

发布于2021-01-05阅读

前端研发规范

参考文档

tslint

命名

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

风格

使用单引号括起字符串
总是使用大括号括起循环体和条件体开大括号
总是放在其关联语句的同一行（大括号不换行）
圆括号内侧不留空格；在圆括号内的逗号、冒号和分号后空一格。

每个定义使用单独的语句。

// BAD: 
var x = 1, y = 2;
// GOOD:  
var x = 1; 
var y = 2;

const > let > var
当单行无法容下参数声明时, 在多行显示, 且参数必须对齐. 同理, 类成员, 数组成员接口成员也需要对齐
行末是否使用分号，不硬性规定
对于跨越多行的数组字面量, 对象字面量/import/export/type字面量/函数形参列表/函数调用实参等, 都应该尾随逗号
```
const trailingWhitespace = {
foo: 'string',
bar: 1,
}
```

注释

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

箭头函数

只有一个参数时,可以省略括号
```
const arrowFunctiono = i => i 
```
如果可以尽量使用简写的返回
```
const shorthandReturno = () => true
```

别保存 this 的引用。优先使用箭头函数

function foo() {
  return () => {
      console.log(this)
  }
}

函数

new 操作始终加上()

使用函数声明代替函数表达式

// BAD:
const foo = function () {}
// GOOD:
function foo() {}

不要使用 arguments。可以选择 rest 语法 … 替代。
```
function concatenateAll(...args) {
return args.join('');
}
```

对象

只有在必要时, 才添加引号

const objo = {
foo: 'string',
'foo bar': 1,
}

优先使用object spread 语法

// BAD:
let objectAssign = Object.assign({}, obj1)
// GOOD:
let objectSpread = { ...obj1 }

接口

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

操作符/表达式

二元操作符中的字面量应该始终在变量的右边

不要比较boolean 字面量

//BAD:
let baz = ok === true ? 'foo' : 'baz'
// GOOD:
baz = ok ? 'foo' : 'baz'

当使用if语句比较超过三个时, 考虑使用switch
优先使用字符串模板
```
temp = `print${hello} ${world}`
```

模块

导入默认导出, 最好匹配库默认的导出名

// BAD:
import IReact from 'react'
// GOOD:
import React from 'react'

为了减少打包体积, 避免引入整个模块, 而是按需引入需要的子模块. 典型的应用就是lodash
```
// BAD:
import _ from 'lodash'
// GOOD:
import findIndex from 'lodash/findIndex'
```

其它

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