面试题：复杂场景下TypeScript与JavaScript类型互操作性优化

Question

在一个大型前端项目中，部分模块使用JavaScript编写，部分使用TypeScript编写。存在一个场景，JavaScript模块导出一个复杂的函数，该函数接受多个不同类型的参数，返回值类型也较为复杂，且依赖一些全局变量。现在要将这个项目逐步迁移到TypeScript，在保证原有功能不变的情况下，如何优化TypeScript与JavaScript之间的类型互操作性，提高代码的可维护性和类型安全性，同时尽量减少对原有JavaScript代码的修改？请详细阐述思路和具体实现步骤。

Answer 1

思路

1. 类型声明文件创建：为已有的JavaScript函数创建TypeScript类型声明文件（.d.ts），这样在TypeScript模块中调用该JavaScript函数时可以获得类型检查支持，同时不改变原JavaScript代码。
2. 全局变量类型定义：针对函数依赖的全局变量，在TypeScript环境中定义其类型，确保使用时类型安全。
3. 逐步迁移：以模块为单位逐步将JavaScript模块转换为TypeScript模块，在转换过程中利用已创建的类型声明文件保持与未转换JavaScript模块的互操作性。

具体实现步骤

1. 创建类型声明文件
   • 在项目合适位置创建与JavaScript模块同名的.d.ts文件。例如，如果JavaScript模块名为complexFunction.js，则创建complexFunction.d.ts。
   • 在.d.ts文件中定义函数类型。假设JavaScript函数如下：

// complexFunction.js
function complexFunction(a, b, c) {
    // 函数实现，依赖全局变量 globalVar
    return a + b + globalVar + c;
}
export default complexFunction;

在complexFunction.d.ts中定义：

// complexFunction.d.ts
declare const globalVar: number; // 假设 globalVar 是 number 类型
export default function complexFunction(a: string, b: number, c: boolean): { result: string, flag: boolean };

2. 定义全局变量类型
   • 如果项目中没有全局类型声明文件，创建一个，例如global.d.ts。
   • 在global.d.ts中定义全局变量类型，如上述declare const globalVar: number;。如果全局变量需要在不同模块中修改，可以考虑使用let或var定义，并添加合适的访问修饰符。
3. 逐步迁移JavaScript模块
   • 选择一个JavaScript模块开始迁移，将文件扩展名从.js改为.ts。
   • 修复TypeScript语法错误，此时由于有.d.ts文件，调用其他未迁移的JavaScript模块函数不会有类型问题。
   • 逐步将函数内部逻辑按照TypeScript的类型要求进行优化，比如明确局部变量类型等。
4. 测试与验证
   • 在每次迁移一个模块后，进行全面的单元测试和集成测试，确保原有功能不变。
   • 持续进行代码审查，确保新的TypeScript代码遵循项目的编码规范和最佳实践。