只是记录一下突然从 AngularJS 跳到 Vue3 + TypeScript 的大概历程 （吐槽）。
提要 #
刚进公司时做的项目，用的就是 AngularJS，因为最初的 Vue 就是从这个发展而来的，所以上手起来还是蛮顺，在这里把这个项目叫做“10”。然后公司发展需要吧，另一个组基于 Vue2 + ElementUI 开发了一套新的软件系统，我们叫它“20”。再然后就是最近，公司决定开发“30”项目，前端技术栈用的是 Vue3 + TypeScript，UI库用的 Element-Plus，因为人手配置问题，我也有幸加入到该项目中，我一直渴望能在工作中接触到新一点的技术，所以也是愿望成真，能见见世面了。
割裂感 #
割裂感很强，我原以为 TypeScript 只是简单的 JavaScript 基础上加上类型而已，我原本就搞过 Java 的人，加上类型有什么难的呢？结果真接触 TypeScript 的时候，我承认是我搞错了。
我只觉得 麻烦，这大概是因为在 JavaScript 里躺久了，它每一次赋值可能都会引起 TSC（TypeScript编译器） 的报错，然后项目是从 20 升级上来的，这工作简单点来说就是拿 20 的代码复制过来，然后粘贴到 30 的项目中，除了改成 Vue3 的代码外，还要补上各种各样的类型。
说到 20 跟 30，其实也是 Vue2 跟 Vue3 的差别，众所周知 Vue2 用的是 选项式API，就是说它 data 放一块、events 放一块、watch放一块…迁移到 30 的时候，特地拉了个会，说为了两个版本之间的统一，到了 Vue3 这边，data 用 reactive 整个括起来，events 也是类似地用一个对象括起来，下边 return 的时候再用 ...toRefs 处理 data，这样整体改动会比较小，迁移更快。
逐渐了解 #
写多了，加上一边跟进学习，TypeScript 就逐渐上手了，一开始会觉得麻烦，每次声明变量的时候都要加个类型，但其实有 类型推断，一些简单类型的变量并不需要明着给它安排个类型，它自己就会根据后边的赋值而确定自身的类型。如果遇到需要跨类型的情况，可以在声明的时候加个 联合类型，不用太复杂，后边用这个变量的时候，遇到类型不通用，但确实是 联合类型 里的，就给它加个 类型断言。当然这都只是简单规律，实际上会复杂一点，只是说我一开始把这个看得太庞大了，但其实拆细了还是好弄的。
最最喜欢的时候，封装接口会用 泛型，它支持在开发中实际使用的时候传入一个实际的类型。那我事先定好复杂数据的类型，调接口的时候传进去，拿到返回数据的对象了，我直接敲个“.”，自动就能出来这个对象里包含的属性了，属性对应什么类型也是一目了然。
Vue3 这边我感觉是没做好的，升级后的 template 其实稍微有点破坏性更新，但这都算了，因为知道了 Vue3 是 声明式API，才逐渐觉得当初开会时说的那种写法就像是 明明不是选项式却硬写成了选项式，而这种写法其实一点 Vue3 的好处都没应用到，可惜人微言轻了…但是吧，也正是这次经历才让我对 Vue3 了解得更深刻。
总结 #
没想到还真被我写成了吐槽…
主要就是想说，一开始确实被要求的 工作量和deadline 吓到了，但其实先熟悉了 TypeScript 就能跨一大步了。至于 Vue3，可能在最初这种“时间紧任务重”的情况下，这也是最好的迁移方案了吧。
（后续维护岂不是要命？）