合理使用 TS 的枚举类型

最近发现不少新手或有一定 TS 使用经验的的开发同学并没有充分发挥 TS 枚举值的能力，代码中很容易见到 if(status === 1){} else if (status === 2){} 这种魔法数字，项目只要稍微复杂一些，这种魔法数字维护起来就是一场灾难。

ProTable@2x.jpg

类似上图中的枚举状态在开发中很常见，我们可以使用 TS 的枚举类型来提高维护性，减少 bug

bad:

if (status === 1) { // } else if (status === 2) { // }

good:

export enum TaskStatus { // 处理中 processing = 0, // 成功 success = 1, // 异常 error = 2, } if (status === TaskStatus.processing) { // 处理中 } else if (status === TaskStatus.success) { // 成功 } else if (status === TaskStatus.error) { // 异常 } else { // 无效的枚举值 }

当然你也可以使用 switch 语句代替上面的写法。

在类型定义文件引入枚举值

有时候你可能需要在一些全局的 .d.ts 类型声明文件中引用其他模块中定义的枚举值，这种情况可以通过 import() 语句来引入其他枚举值而不破坏 .d.ts 文件的作用范围，例如

Bad:

// xxx.d.ts import { AppType } from '@/componets/AppCard' declare interface AppState { name: string type: AppType }

Good:

// xxx.d.ts declare interface AppState { name: string type: import('@/componets/AppCard').AppType }

尽量避免使用 any

ts-man.png

要获得最佳阅读体验，请访问原文 https://baiyun.me/improve-maintainability-with-typescript