面试题：TypeScript 微前端跨应用类型共享的模块管理

Question

假设你正在构建一个基于 TypeScript 的微前端架构，多个子应用需要共享一些类型。请描述如何使用 npm 包或自定义模块系统来管理和共享这些类型，同时要考虑到版本兼容性和更新机制。

Answer 1

使用 npm 包管理共享类型

1. 创建共享类型包：
   • 在项目中创建一个独立的 npm 包，专门用于存放共享类型。例如，命名为 shared - types - package。
   • 在该包的 src 目录下定义各种 TypeScript 类型，比如接口、类型别名等。例如：

   // shared - types - package/src/types.ts
   export interface User {
       id: number;
       name: string;
   }
   

   • 使用 tsconfig.json 配置好编译选项，确保能正确生成 JavaScript 和类型声明文件（.d.ts）。例如：

   {
       "compilerOptions": {
           "target": "ES5",
           "module": "commonjs",
           "declaration": true,
           "outDir": "dist",
           "rootDir": "src"
       }
   }
   

2. 发布到 npm 仓库：
   • 登录到 npm 仓库（如果是私有仓库，确保配置正确），使用 npm publish 命令将包发布。
3. 子应用引用：
   • 在每个子应用中，通过 npm install shared - types - package@x.x.x 安装共享类型包，其中 x.x.x 是所需的版本号。
   • 在子应用的 TypeScript 文件中导入共享类型：

   import { User } from'shared - types - package';
   function displayUser(user: User) {
       console.log(`User ID: ${user.id}, Name: ${user.name}`);
   }
   

4. 版本兼容性和更新机制：
   • 版本兼容性：在子应用的 package.json 中，使用语义化版本控制指定共享类型包的版本范围。例如，"shared - types - package": "^1.0.0" 表示允许安装 1.x.x 版本系列中最新的版本，但不包括 2.0.0 及以上版本。这样可以在一定程度上保证兼容性，因为语义化版本控制规定了在不破坏 API 的情况下，补丁版本（第三位数字）和次要版本（第二位数字）的升级不会引入不兼容的变化。
   • 更新机制：定期检查共享类型包的新版本，可以使用工具如 npm - check - updates。当有新版本可用且符合版本范围时，在子应用中运行 npm install shared - types - package@latest 进行更新。更新后，确保子应用中使用共享类型的代码仍然能够正常编译和运行，可能需要根据新版本的类型定义变化进行相应调整。

使用自定义模块系统管理共享类型

1. 项目结构调整：
   • 在项目根目录下创建一个 shared 目录，用于存放共享类型。例如：

   project - root/
       shared/
           types.ts
       sub - app - 1/
       sub - app - 2/
   

2. 配置自定义模块解析：
   • 在每个子应用的 tsconfig.json 中，通过 paths 选项配置自定义模块解析路径。例如，对于 sub - app - 1：

   {
       "compilerOptions": {
           "baseUrl": ".",
           "paths": {
               "@shared/*": ["../shared/*"]
           }
       }
   }
   

3. 共享类型使用：
   • 在子应用的 TypeScript 文件中，使用自定义模块路径导入共享类型。例如，在 sub - app - 1/src/app.ts 中：

   import { User } from '@shared/types';
   function displayUser(user: User) {
       console.log(`User ID: ${user.id}, Name: ${user.name}`);
   }
   

4. 版本兼容性和更新机制：
   • 版本兼容性：由于共享类型是通过项目内路径引用，不存在像 npm 包那样的版本号概念。但可以通过在 shared 目录下维护版本记录文件（如 CHANGELOG.md），记录每次共享类型的变化。开发人员在更新共享类型时，需要通知所有子应用开发人员，确保他们了解变化可能带来的影响，在子应用中相应调整代码以保证兼容性。
   • 更新机制：当共享类型有更新时，直接修改 shared 目录下的相关文件。子应用开发人员在拉取最新代码后，重新编译子应用，此时会自动使用更新后的共享类型。同时，结合代码审查等流程，确保子应用代码与更新后的共享类型兼容。