Typescript代码整洁之道

最近半年陆续交接了几位同事的代码，发现虽然用了严格的eslint来规范代码的书写方式，同时项目也全量使用了Typescript，但是在review代码的过程中，还是有很多不整洁不规范的地方。良好的代码具有很好的可读性，后续维护起来也会令人愉悦，也能降低重构的概率。本文会结合Typescript，谈谈如何clean代码：

•  基础规范
•  函数式

一、基础规范

（1）常量

常量必须命名, 在做逻辑判断的时候，也不允许直接对比没有命名的常量。

•  错误的书写 

1. switch(num){  
2.       case 1:  
3.         ...  
4.       case 3:  
5.         ... 
6.        case 7:  
7.         ...  
8.  } 
9.   if(x === 0){  
10.       ...  
11.  } 

上述的例子中，根本不知道1 3 7 对应的是什么意思，这种写法就基本上没有可读性。

•  正确的写法   

1. enum DayEnum {  
2.        oneDay = 1,  
3.        threeDay = 3,  
4.        oneWeek = 7,  
5.    }  
6.    let num  = 1;  
7.    switch(num){  
8.        case DayEnum.oneDay:  
9.        ...  
10.        case DayEnum.threeDay:  
11.        ...  
12.        case DayEnum.oneWeek:  
13.        ...  
14.    }  
15.   const RightCode = 0;  
16.   if(x === RightCode) 

从上述正确的写法可以看出来，常量有了命名，在switch或者if等逻辑判断的时候，我们可以从变量名得知常量的具体含义，增加了可读性。

（2）枚举

除了常量枚举外，在Typescript的编译阶段，枚举会生成一个maping对象，如果不是字符串枚举，甚至会生成一个双向的mapping。因此在我们的业务代码中，有了枚举，就不需要一个与枚举值相关的数组。

•  错误的写法 

1. enum FruitEnum {  
2.        tomato = 1,  
3.        banana =  2,  
4.        apple = 3  
5. }  
6. const FruitList = [  
7.   {  
8.      key:1,  
9.      value: 'tomato'  
10.   },{  
11.      key:2,  
12.      value: 'banana'  
13.   },{  
14.      key:3,  
15.      value: 'apple'  
16.   }  
17. ] 

这里错误的原因是冗余，我们要得到一个FruitList，并不需要new一个，而是可以直接根据FruitEnum的枚举来生成一个数组，原理就是我们之前所说的Typescript的枚举，除了常量枚举外，在编译的时候是会生成一个map对象的。

•  正确的写法 

1. enum FruitEnum {  
2.     tomato = 1,  
3.     banana =  2,  
4.     apple = 3  
5. }  
6. const FruitList = Object.entries(FruitEnum) 

上述就是正确的写法，这种写法不仅仅是不冗余，此外，如果修改了枚举的类型，我们只要直接修改枚举，这样衍生的数组也会改变。

除此之外，字符串枚举值和字符串是有本质区别的，在定义类型的时候请千万注意，要不然会让你写的代码很冗余。

•  错误的用法 

1. enum GenderEnum{  
2.   'male' = '男生',  
3.   'female' = '女生'  
4. }  
5. interface IPerson{  
6.    name:string  
7.    gender:string  
8. }  
9. let bob:IPerson = {name:"bob",gender:'male'}  
10. <span>{Gender[bob.gender as keyof typeof GenderEnum]}</span>   

上述的错误的原因就是IPerson的类型定义中，gender不应该是string，而应该是一个枚举的key，因此，在将string转枚举值的时候，必须增加一个as keyof typeof GenderEnum的断言。

•   正确的写法 

1. enum GenderEnum{  
2.   'male' = '男生',  
3.   'female' = '女生'  
4. }  
5. interface IPerson{  
6.    name:string  
7.    gender:keyof typeof GenderEnum  
8. }  
9. let bob:IPerson = {name:"bob",gender:'male'}  
10. <span>{Gender[bob.gender]}</span>   

上述 就是正确的写法，字符串枚举和字符串类型是有 明显区别的，当某个变量需要使用到枚举时，不能将他定义成string。

（3）ts-ignore & any

Typescript中应该严格禁止使用ts-ignore，ts-ignore是一个比any更加影响Typescript代码质量的因素。对于any，在我的项目中曾一度想把any也禁掉,但是有一些场景中是需要使用any的，因此没有粗鲁的禁止any的使用。但是绝大部分场景下，你可能都不需要使用any.需要使用any的场景，可以case by case的分析。

•  错误使用ts-ignore的场景 

1. //@ts-ignore   
2.  import Plugin from 'someModule' //如果someModule的声明不存在  
3.  Plugin.test("hello world") 

上述就是最经典的使用ts-ignore的场景，如上的方式使用了ts-ignore.那么Typescript会认为Plugin的类型是any。正确的方法通过declare module的方法自定义需要使用到的类型.

•  正确的方法 

1. import Plugin from 'someModule'  
2. declare module 'someModule' {  
3.     export type test = (arg: string) => void;  
4. } 

在module内部可以定义声明，同名的声明遵循一定 的合并原则，如果要扩展三方模块，declare module是很方便的。

同样的大部分场景下，你也不需要使用any，部分场景下如果无法立刻确定某个值的类型，我们可以 用unknown来代替使用any。

any会完全失去类型判断，本身其实是比较危险的，且使用any就相当于放弃了类型检测，也就基本上放弃了typescript。举例来说：

1. let fish:any = {  
2.        type:'animal', 
3.         swim:()=> {     
4.         } 
5. }  
6. fish.run() 

上述的例子中我们调用了一个不存在的方法 ，因为使用了any，因此跳过了静态类型检测，因此是不安全的。运行时会出错，如果无法立刻确定某个值的类型，我们可以 用unknown来代替使用any。

1. let fish:unknown = {  
2.       type:'animal',  
3.       swim:()=> {     
4.        } 
5. }  
6. fish.run() //会报错 

unkonwn是任何类型的子类型，因此跟any一样，任意类型都可以赋值给unkonwn。与any不同的是，unkonwn的变量必须明确自己的类型，类型收缩或者类型断言后，unkonwn的变量才可以正常使用其上定义的方法和变量。

简单来说，unkonwn需要在使用前，强制判断其类型。

（4）namespace

Typescript的代码中，特别是偏业务的开发中，你基本上是用不到namespace的。此外module在nodejs中天然支持，此外在es6(next)中 es module也成为了一个语言级的规范，因此Typescript官方也是推荐使用module。

namespace简单来说就是一个全局对象,当然我们也可以把namespace放在module中，但是namespace放在module中也是有问题的。

•  错误的方法 

1. //在一个shapes.ts的模块中使用  
2. export namespace Shapes {  
3.     export class Triangle {  
4.       /* ... */  
5.     }  
6.     export class Square {  
7.       /* ... */  
8.     }  
9. }  
10. //我们使用shapes.ts的时候  
11. //shapeConsumer.ts  
12. import * as shapes from "./shapes";  
13. let t = new shapes.Shapes.Triangle(); // shapes.Shapes? 

•  正确的方法（直接使用module） 

1. export class Triangle {  
2. /* ... */  
3. }  
4. export class Square {  
5. /* ... */  
6. } 

上述直接使用module，就是正确的方法，在模块系统中本身就可以避免变量命名重复，因此namespace是没有意义的。

（5）限制函数参数的个数

在定义函数的时候，应该减少函数参数的个数，推荐不能超过3个。

•  错误的用法 

1. function getList(searchName:string,pageNum:number,pageSize:number,key1:string,key2:string){  
2.    ...  
3. } 

不推荐函数的参数超过3个，当超过3个的时候，应该使用对象来聚合。

• 正确的用法 

1. interface ISearchParams{  
2.    searchName:string;  
3.    pageNum:number;  
4.    pageSize:number;  
5.    key1:string;  
6.    key2:string;  
7. }   
8. function getList(params:ISearchParams){  
9. } 

同样的引申到React项目中，useState也是同理

1. const [searchKey,setSearchKey] = useState('');  
2. const [current,setCurrent] = useState(1)  
3. const [pageSize,setPageSize] = useState(10)  //错误的写法  
4. const [searchParams,setSearchParams] = useState({  
5.    searchKey: '',  
6.    current:1,  
7.    pageSize:10  
8. })  //正确的写法 

（6）module模块尽量保证无副作用

请不要使用模块的副作用。要保证模块的使用应该是先import再使用。

•  错误的方法 

1. //Test.ts  
2. window.x = 1;  
3. class Test{  
4. }  
5. let test = new Test()  
6. //index.ts  
7. import from './test'  
8. ... 

上述在index.ts中import的模块，其调用是在test.ts文件内部的，这种方法就是import了一个有副作用的模块。

正确的方法应该是保证模块非export变量的纯净，且调用方在使用模块的时候要先import,后调用。

•  正确的方法 

1. //test.ts  
2. class Test{  
3.    constructor(){  
4.       window.x = 1  
5.    }  
6. }  
7. export default Test  
8. //index.ts  
9. import Test from './test'  
10. const t = new Test(); 

（7）禁止使用!.非空断言

非空断言本身是不安全的，主观的判断存在误差，从防御性编程的角度，是不推荐使用非空断言的。

•  错误的用法 

1. let x:string|undefinedundefined = undefined  
2. x!.toString() 

因为使用了非空断言，因此编译的时候不会报错，但是运行的时候会报错.

比较推荐使用的是optional chaining。以?.的形式。

（8）使用typescript的内置函数

typescript的很多内置函数都可以复用一些定义。这里不会一一介绍，常见的有Partial、Pick、Omit、Record、extends、infer等等，如果需要在已有的类型上，衍生出新的类型，那么使用内置函数是简单和方便的。此外还可以使用 联合类型、交叉类型和类型合并。

•  联合类型 

1. //基本类型  
2. let x:number|string  
3. x= 1;  
4. x = "1" 

1. //多字面量类型   
2. let type:'primary'|'danger'|'warning'|'error' =  'primary' 

值得注意的是字面量的赋值。

1. let type:'primary'|'danger'|'warning'|'error' =  'primary'  
2. let test = 'error'  
3. type = test  //报错  
4. let test = 'error' as const   
5. type =  test //正确 

•  交叉类型 

1. interface ISpider{  
2.    type:string  
3.    swim:()=>void  
4. }  
5. interface IMan{  
6.    name:string;  
7.    age:number;  
8. }  
9. type ISpiderISpiderMan = ISpider & IMan  
10. let bob:ISpiderMan  = {type:"11",swim:()=>{},name:"123",age:10} 

•  类型合并

最后讲一讲类型合并，这是一种极其不推荐的方法。在业务代码中，不推荐使用类型合并，这样会增加代码的阅读复杂度。类型合并存在很多地方。class、interface、namespace等之间都可以进行类型合并，以interface为例：

1. interface Box {  
2.   height: number;  
3.   width: number;  
4. }  
5. interface Box {  
6.   scale: number;  
7. }  
8. let box: Box = { height: 5, width: 6, scale: 10 }; 

上述同名的interface Box是会发生类型合并的。不仅interface和 interface可以类型合并，class和interface,class和namesppace等等都可能存在同名类型合并，在业务代码中个人不推荐使用类型合并。

（9）封装条件语句以及ts的类型守卫

• 错误的写法 

1. if (fsm.state === 'fetching' && isEmpty(listNode)) {  
2.  // ...  
3. } 

•  正确的写法 

1. function shouldShowSpinner(fsm, listNode) {  
2.      return fsm.state === 'fetching' && isEmpty(listNode);  
3. }  
4.    if (shouldShowSpinner(fsmInstance, listNodeInstance)) {  
5.      // ... 
6.     } 

在正确的写法中我们封装了条件判断的逻辑成一个独立函数。这种写法比较可读，我们从函数名就能知道做了一个什么判断。

此外封装条件语句也可以跟ts的自定义类型守卫挂钩。来看一个最简单的封装条件语句的自定义类型守卫。

1. function IsString (input: any): input is string {   
2.     return typeof input === 'string';  
3. }  
4. function foo (input: string | number) {  
5.      if (IsString(input)) {  
6.         input.toString() //被判断为string  
7.      } else {     
8.      }  
9. } 

在项目中合理地使用自定义守卫，可以帮助我们减少很多不必要的类型断言，同时改善代码的可读性。

（10）不要使用非变量

不管是变量名还是函数名，请千万不要使用非命名，在业务中我就遇到过这个问题，后端定义了一个非命名形式的变量isNotRefresh：

1. let isNotRefresh = false  //是否不刷新，否表示刷新 

isNotRefresh表示不刷新，这样定义的变量会导致跟这个变量相关的很多逻辑都是相反的。正确的形式应该是定义变量是isRefresh表示是否刷新。

1. let isRefresh = false  //是否刷新，是表示刷新 

二、函数式

个人非常推荐函数式编程，主观的认为链式调用优于回调，函数式的方式又优于链式调用。近年来，函数式编程日益流行，Ramdajs、RxJS、cycleJS、lodashJS等多种开源库都使用了函数式的特性。本文主要介绍一下如何使用ramdajs来简化代码。

（1）声明式和命令式

个人认为函数声明式的调用比命令式更加简洁，举例来说：

1. //命令式  
2. let names:string[] = []  
3. for(let i=0;i<persons.length;i++){  
4.         names.push(person[i].name)  
5. }  
6. //声明式  
7. let names = persons.map((item)=>item.name) 

从上述例子我们可以看出来，明显函数调用声明式的方法更加简洁。此外对于没有副作用的函数，比如上述的map函数，完全可以不考虑函数内部是如何实现的，专注于编写业务代码。优化代码时，目光只需要集中在这些稳定坚固的函数内部即可。

（2）Ramdajs

推荐使用ramdajs，ramdajs是一款优秀的函数式编程库，与其他函数式编程库相比较，ramdajs是自动柯里化的，且ramdajs提供的函数从不改变用户已有数据。

来自最近业务代码中的一个简单的例子：

1. /**  
2.    * 获取标签列表  
3.    */  
4.   const getList = async () => {  
5.       pipeWithP([  
6.           () => setLoading(true),  
7.           async () =>  
8.               request.get('', {  
9.                   params: {action: API.getList},  
10.               }),  
11.           async (res: IServerRes) => {  
12.               R.ifElse(  
13.                 R.isEqual(res.message === 'success'),  
14.                 () => setList(res.response.list);  
15.               )();  
16.           },  
17.           () => setLoading(false)  
18.       ])();  
19.   }; 

上述是业务代码中的一个例子，利用pipe可以使得流程的操作较为清晰，此外也不用定义中间变量。

再来看一个例子：

1. let persons = [  
2.       {username: 'bob', age: 30, tags: ['work', 'boring']},  
3.       {username: 'jim', age: 25, tags: ['home', 'fun']},  
4.       {username: 'jane', age: 30, tags: ['vacation', 'fun']}     
5.  ] 

我们需要从这个数组中找出tags包含fun的对象。如果用命令式：

1. let NAME = 'fun'  
2. let person;  
3. for(let i=0;i<persons.length;i++){  
4.    let isFind = false  
5.    let arr = persons[i].tags;  
6.    for(let j = 0;j<arr.length;j++){  
7.       if(arr[i] === NAME){  
8.          isFind = true  
9.          break;  
10.       }  
11.    }  
12.    if(isFind){ 
13.        personperson = person[i]  
14.       break;  
15.    }  
16. } 

我们用函数式的写法可以简化：

1. let person = R.filter(R.where({tags: R.includes('fun')})) 

很明显减少了代码量且更加容易理解含义。

最后再来看一个例子：

1. const oldArr= [[[[[{name: 'yuxiaoliang'}]]]]]; 

我们想把oldArr这个多维数组，最内层的那个name,由小写转成大写，用函数式可以直接这样写。

1. R.map(atem =>  
2.      R.map(btem => R.map(ctem => R.map(dtem => R.map(etem => etem.name.toUpperCase())(dtem))(ctem))(btem))(atem),  
3.  )(arr); 

​原文地址：https://mp.weixin.qq.com/s/3R63Ltxv4Jor3rEj88vkIQ