将 JavaScript AMD 项目增量迁移到 TypeScript

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前, 星球 内第2个项目《仿小红书(微服务架构)》正在更新中。第1个项目:全栈前后端分离博客项目已经完结,演示地址:http://116.62.199.48/。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 255 小节,累计 39w+ 字,讲解图:1716 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1300+ 小伙伴加入,欢迎点击围观

动机

异步模块定义 (AMD) 和 RequireJS 是我过去四年中 Javascript 代码模块化的选择。但是我正在开发的企业 Web 应用程序正在增长,管理代码库越来越难。我做了一些技术研究,并决定将项目迁移到 TypeScript。

TypeScript 勾选了我愿望清单中的所有要点:

  • 支持AMD格式,代码可以增量迁移
  • JavaScript 是合法的 TypeScript
  • 对更严格的接口进行类型检查
  • ES6,而我们等待它发生(或其中一些)
  • 出色的 IDE 支持来执行所有这些魔法

TypeScript 似乎是解决我的问题的完美解决方案,但我的 Web 应用程序太大太复杂,无法以大包方式重写为 TypeScript。我必须采用增量方法并承诺使用 TypeScript 编写所有新代码,同时将旧代码保留在 JavaScript 中。 TypeScript 和 JavaScript 的这种可互换使用导致了一些问题,这些问题需要记录不完整的 TypeScript 功能,我将在这篇博文中对此进行描述。

对于喜欢检查源代码并跳过阅读的人:https: //github.com/v3nom/RequireJStoTypescript

从 JavaScript (AMD) 使用 TypeScript

从 JavaScript 使用 TypeScript 代码非常简单。使用 AMD 模块格式编译 Typescript 源代码。生成的 JavaScript 默认放在 TypeScript 文件旁边,到目前为止,这个设置对我来说效果最好。

查看新的 tsconfig.json 功能( 阅读更多 )。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...


我们要在现有 JavaScript 代码中使用的 TypeScript 类。类必须作为模块导出(TS 1.4 中的外部模块)。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...


简单的 JavaScript 模块。我们希望 JavaScript 文件是在与 TypeScript 源代码相同的位置生成的,因此在声明 AMD 依赖项时我们真的不需要考虑它。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...

从 TypeScript 使用现有的 JavaScript AMD

现在这就是事情变得有点棘手的地方。为了导入 JavaScript 代码,我们需要使用引用注释。

我们要在 TypeScript 代码中使用的 JavaScript 模块。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...


这是一个使用遗留 JavaScript 代码的 TypeScript 文件。参考注释必须是 TypeScript 文件中的第一件事(陷阱)。您基本上是在 AMD 定义何时生成 JavaScript 代码时编写要填充的内容: 路径 是依赖项位置, 名称 是您可以引用导入的依赖项的名称。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...


编译后的 JS 代码最好地解释了发生了什么。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...

奖励:遗留 JavaScript 代码的类型支持(手动)

如果您有空闲时间来声明类型定义,您还可以在 TypeScript 中对遗留 JavaScript 代码进行类型检查。


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...


现在我们可以简化我们之前的 TypeScript 类


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...


将生成完全相同的 JavaScript 代码。如果您在项目中遇到名称冲突问题,您还可以更新旧版本:


 //tsconfig.json
...
    "compilerOptions": {
        "module": "amd",
}
...

结论

将企业 Web 应用程序增量更新为 TypeScript 轻而易举。每次我接触旧版 JavaScript 代码时,我都会将其转换为 TypeScript。而且由于 JavaScript 是合法的 TypeScript,因此引入新错误的可能性非常小。但是,当然,单元测试在任何大项目中都是必须的。

从现在开始,所有新的客户端代码都是用 TypeScript 编写的,并且很容易让其他团队成员参与进来。