TypeScript + 大型项目实战

转载地址：https://juejin.im/post/5b54886ce51d45198f5c75d7

TypeScript + 大型项目实战

写在前面

---

TypeScript 已经出来很久了，很多大公司很多大项目也都在使用它进行开发。上个月，我这边也正式跟进一个对集团的大型运维类项目。

项目要做的事情大致分为以下几个大模块

• 一站式管理平台
• 规模化运维能力
• 预案平台
• 巡检平台
• 全链路压测等

每一个模块要做的事情也很多，由于牵扯到公司业务，具体要做的一些事情这里我就不一一列举了，反正项目整体规模还是很大的。

一、关于选型

在做了一些技术调研后，再结合项目之后的开发量级以及维护成本。最终我和同事在技术选型上得出一致结论，最终选型定为 Vue 最新全家桶 + TypeScript。

那么问题来了，为什么大型项目非得用 TypeScript 呢，ES6、7 不行么？


其实也没说不行，只不过我个人更倾向在一些协作开发的大型项目中使用 TypeScript 。下面我列一些我做完调研后自己的一些看法

1. 首先，TypeScript 具有类型系统，且是 JavaScript 的超集。 JavaScript 能做的，它能做。JavaScript 不能做的，它也能做。
2. 其次，TypeScript 已经比较成熟了，市面上相关资料也比较多，大部分的库和框架也读对 TypeScript 做了很好的支持。
3. 然后，保证优秀的前提下，它还在积极的开发完善之中，不断地会有新的特性加入进来
4. JavaScript 是弱类型并且没有命名空间，导致很难模块化，使得其在大型的协作项目中不是很方便
5. vscode、ws 等编辑器对 TypeScript 支持很友好
6. TypeScript 在组件以及业务的类型校验上支持比较好，比如

// 定义枚举
const enum StateEnum {
  TO_BE_DONE = 0,
  DOING = 1,
  DONE = 2
}

// 定义 item 接口
interface SrvItem {
  val: string,
  key: string
}

// 定义服务接口
interface SrvType {
  name: string,
  key: string,
  state?: StateEnum,
  item: Array<SrvItem>
}

// 然后定义初始值（如果不按照类型来，报错肯定是避免不了的）
const types: SrvType = {
  name: '',
  key: '',
  item: []
}