本文是袋鼠云前端团队在知乎专栏@DTUX的第一期内容，分享了EasyManager产品的TypeScript重构过程。重构目标是提高协作效率，剔除冗余代码。重构过程中，团队对比了js和ts的结构优缺点，最终采用经典ts结构，以功能为单位进行目录搭建。重构步骤包括业务逻辑代码迁移、路由定义、CSS内容迁移和测试。重构过程中遇到React Router V4的嵌套路由等挑战，但整体进展顺利。
作为一家创新驱动的科技公司，袋鼠云每年研发投入达数千万，公司80%员工都是技术人员，袋鼠云产品家族包括企业级一站式数据中台PaaS数栈、交互式数据可视化大屏开发平台Easy[V]等产品也在迅速迭代。在进行产品研发的过程中，技术小哥哥们能文能武，不断提升产品性能和体验的同时，也把这些提升和优化过程记录下来，现录入“袋鼠云研发手记”专栏中，以和业内童鞋们分享交流。
下为“袋鼠云研发手记”专栏第一期，本期作者为袋鼠云前端团队。
袋鼠云前端团队-知乎专栏@DTUX
袋鼠云UX团队拥有十多名专家级别，经验丰富的前端开发工程师，分别支撑公司大数栈产品线的不同子项目的开发需求，具体包括数据中台产品「数栈」与数据可视化产品Easy[V]两大块。
在长期的项目实践与产品迭代过程中，团队成员在 React 技术栈、数据可视化技术、前端工程化等细分领域上不断深耕探索，积累了丰富的经验与最佳实践，并分享在知乎专栏@DTUX。
第一期
袋鼠云 EasyManager 的 TypeScript 重构纪要
前言
在 2018 年 Stack overflow 的开发者调查结果中，开发者们最爱的语言一栏中TypeScript 超越了 JavaScript 位居第四。
相较于 JavaScript，开发者们更喜欢 TypeScript 将类型系统带入了 JavaScript 中，如此一来，开发者能够在运行程序之前发现更多的潜在的问题；得益于 TypeScript 编译器的良好支持，结合VSCode， 它还可以提示我们该如何修复这些问题；将类型系统添加进 JavaScript， 同时允许编辑器给开发者提供更多的便利，比如代码补全、更方便的进行项目重构以及自动的模块导入等等。
在 TypeScript 官网中列出了很多已经使用 TypeScript 的机构，同样的还有著名测试框架 Jest 也表示尝试将 Jest 迁移到 TypeScript。
TypeScript 的发展势头可见一斑。
Easy Manager
Easy Manager是一款产品安装部署工具，是数栈大数据平台的运维管家，使用Easy Manager可实现数栈产品的安装部署。
在产品安装部署完成后，Easy Manager支持完成大数据平台全方位的运维，包含产品升级、扩缩节点、版本回滚、产品卸载、集群监控、实时告警等功能，致力于帮助客户最大化地节省运维成本，降低线上故障率与运维难度，提供安全稳定的产品部署与监控。
Easy Manager 目前已支持百至千个节点的集群部署，可进行大集群的部署、监控及日常运维。同时，除支持数栈大数据平台部署外，也可支持第三方产品的安装部署。
关于此次重构
本次 EasyManager 的重构主要目标是使用 TypeScript 替代 JavaScript，加上类型约束提高团队协作效率，同时剔除已经不需要的冗余代码。
在本次 EasyManager （下文简写成：EM）的重构之前，已经进行了一部分的重构工作，之前是基于EM2.3 版本进行重构的，但是发现 EM2.4 版本改动较大，需要在之前重构基础上继续进行重构工作。计划是一边开发 EM2.5版本，一边进行 EM2.4 版本的重构工作，在EM2.5基础上，最后进行 EM2.6 版本的开发同时进行遗漏补缺。
对于已经部署使用了EM2.5 版本的客户和未来即将部署使用EM2.6 版本的客户情况，我们保留了 js_master 和 ts_master 两个分支。前者主要进行EM2.5 版本的 bug 修复为客户做支持，后者则是主版本进行版本迭代开发。
整个过程还是比较顺利的，没有遇到阻塞工作流程的情况，下面详细来为大家分析一下本次重构详细情况。
js VS ts 结构区别与利弊
js 版本的目录结构并不属于那种一眼就能看懂的，其类似数栈将每个页面所需的 action、reducer、assets 以及模块需要的其他资源都放在了一个以模块名称命名的文件夹里，我的理解是这里是以“模块”为思想进行的开发结构搭建，比较方便开发，对人协同开发对 changelog 亦能一目了然，管理 redux 也很容易定位。
如下图：
最低0.47元/天 解锁文章
扫一扫
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
