目的

用更合理的方式书写 Typescript

规范的代码可以促进团队合作，
规范的代码可以减少bug 处理，
规范的代码可以降低维护成本，
规范的代码有助于代码审查，
养成代码规范的习惯，有助于程序员自身的成长

名词解释

大驼峰PascalCase
小驼峰camelCase

命名及约定

Variable and Function(变量和函数)
尽可能使用完整的单词拼写命名。语义化 ```javascript // Good const validateUserInfo = (id:string)=>{}

// Bad const valUsr = (id:string)=>{}


- 使用string/number/boolean声明基本类型，不是用String/Number/Boolean包装类型。
```javascript
// Good
const name:string = "pis"
// Bad
const name:String = "uncle"

不使用Function声明类型

type FunctionTypes = {
  onSomething: Function; // ❌ bad，不推荐。任何可调用的函数
  onClick: () => void; // ✅ better ，明确无参数无返回值的函数
  onChange: (id: number) => void; // ✅ better ，明确参数无返回值的函数
  onClick(event: React.MouseEvent<HTMLButtonElement>): void; // ✅ better
};

对象类型尽量使用Record 代替{} 和object

// good
const person:Record<string,unknow> = {
name:'pis',
age:18
}
// bad
const person:object = {
name:'pis'
}

使用小驼峰给变量和函数命名

Use camelCase for variable and function names

//Good
var fooVar;
function barFunc() { }
//Bad
var FooVar;
function BarFunc() { }

数组元素为简单类型时，使用T[]声明类型；否则应使用Array ```javascript // Good const ids: string[] const response:Promise>>

// Bad const ids: Array const response:Promise>

<a name="rVfpT"></a>
## namespace 命名空间
- 使用大驼峰对命名空间namespace进行命名
```javascript
// Good
export default namespace UserService {
  export async function getUser(){}
}
// Bad
export default namespace user_service {
  export async function getUser(){}
}

type 类型

使用大驼峰为类型type命名。 ```javascript // Good type Person {}

// Bad type person{}


- 不应显式声明可以自动推导的类型
```javascript
// Good
let shouldUpdate = false;
// Bad
let shouldUpdate: boolean = false;

Class 类

使用大驼峰对类class进行命名

Use PascalCase for class names.

//Good
class Foo { }
// Bad
class foo { }

使用小驼峰对类成员(变量和方法)进行命名

Use camelCase of class members and methods

// Good
class Foo {
    bar: number;
    baz() { }
}
// Bad
class Foo {
    Bar: number;
    Baz() { }
}

不要为私有属性名添加_前缀。 ```javascript //Good const locaVariable

// Bad const _localVariable

<a name="UWGDA"></a>
## Interface 接口
- 使用大驼峰对接口interface进行命名
   - 不要使用I做为接口名前缀。
> Use PascalCase for name.
```javascript
// good
interface ButtonProps {
    // ...
}
// bad
interface IButtonProps {
    // ...
}

Enum 枚举

使用大驼峰对枚举enum进行命名 ```javascript /* Good / export enum OperationType {

/* 新增操作 / POST = ‘POST’,

/* 删除操作 / DELETE = ‘DELETE’,

/* 更新操作 / PUT = ‘PUT’,

/* 批量更新操作 / PATCH = ‘PATCH’,

/* 获取操作 / GET = ‘GET’, }

/* Bad / export enum OPERATION_TYPE {

/* 新增操作 / POST = ‘POST’,

/* 删除操作 / DELETE = ‘DELETE’,

/* 更新操作 / PUT = ‘PUT’,

/* 批量更新操作 / PATCH = ‘PATCH’,

/* 获取操作 / GET = ‘GET’, }

<a name="jlqv1"></a>
# 类型定义
- 在一个文件里，类型定义应该出现在顶部。(import之后)
- 不要导出类型/函数，除非你要在不同的组件中共享它。
- 不要在全局命名空间内定义类型/值。
- 共享的类型应该在types.ts里定义。
<a name="q1Z5V"></a>
# 文件名
- 名词开头的文件名
   - 使用破折号(-)分割描述性单词或者大驼峰，这两种命名方式都被允许，但是一个项目中只能用其中一种
```javascript
// Good
user-list.ts
UserList.ts

动词开头的文件名使用小驼峰
```
// Good
getName.ts
fetchUserInfo.ts
```
使用点(.)将描述性名称与类型分开
```
// Good
interface.d.ts
```
函数
返回值会被忽略的回调函数设置返回值类型void,而不是any ```javascript // Good function fn(x: () => void) { x(); }

// Bad function fn(x: () => any) { x(); }


- 不要函数的参数数量不同而编写不同的重载
```javascript
// Good
declare function beforeAll(action：boolean,timeout?: number): void;
// Bad
declare function beforeAll(action: boolean, timeout?: number): void;
declare function beforeAll(action: boolean): void;

项目中最佳实践

引入React

// 推荐使用✅ better 【最可靠的一种方式】
import * as React from 'react'
import * as ReactDOM from 'react-dom'
// 需要添加额外的配置："allowSyntheticDefaultImports": true
import React from 'react'
import ReactDOM from 'react-dom'

React函数组件声明

如果该组件有 props，在组件上方写上对应声明类型并导出，类型名为 组件名 + Props
组件比较推荐使用 React.FunctionComponent，简写形式：React.FC:React.FC 会提供默认的 children 类型，并将 props 的类型作为泛型参数传入 ```javascript import React from ‘react’

// 推荐使用✅ better 【大驼峰组件名+props】 // 推荐使用✅ better 【非必要不导出】 interface DemoComponentProps{ title?:string; } // 推荐使用✅ better 【组件名首字母大写】 // 推荐使用✅ better 【组件props如果是可选参数，最好给默认值】 const DemoComponent :React.FC = ({title=”我是title默认值”})=>{ // 推荐使用✅ better 【return的jsx最好使用圆括号进行包裹】 return (

{title}

) }

<a name="MQx9L"></a>
## Hooks使用
<a name="NQqjV"></a>
### 组件化书写规范
> 推荐使用✅ 【组件的结构】
- import 导入`**三方包和三方组件 [在最顶端]**`
- import 导入`**自定义的包**`
- import 导入 TS的类型是增加`**type关键字**`
- import 导入 `**组件**`
<a name="D04t9"></a>
### useState
> 状态管理
```javascript
// 推荐使用✅ better 【可以确定初始值的在声明的时候给默认值】
const [ visible, toggleVisible] = useState<boolean>(false)
// 推荐使用✅ better 【没有初始值赋予undefined或者null】
const [username,setUserName] = useState<string|undefined>(undefined)

useEffect

副作用

//异步请求，处理方式：
// ✅ better 【自执行函数】
useEffect(() => {
    (async () => {
        const { data } = await ajax(params);
        // todo
    })();
}, [params]);
// 或者 then 也是可以的
useEffect(() => {
    ajax(params).then(({ data }) => {
        // todo
    });
}, [params])

善用类型注释

通过/* /形式的注视为Typescript类型做标记提示：

/**
* 卷位包含的配置信息
*/
export interface rollSettingProps {
/** 所属工单 */
productionOrder?: string;
/** 产品规格 */
materialModel?: string;
/** 卷位 */
rollPosition?: number;
/** 物料名称 */
name?: string;
/** 物料批次号 */
batchNo?: string;
/** 卷重 */
weight?: number | undefined;
/** 是否选中 */
isSelected?: boolean;
}

鼠标悬浮的时候编辑器会有更好的提示

参考链接

Typescript cheatsheet
React + TypeScript实践

脱颖而出的慢能力

TypeScript编码规范(初版)

目的