面试题：TypeScript 微前端跨应用类型共享方案之基础理解

Question

在 TypeScript 微前端跨应用类型共享方案中，简述类型定义文件（.d.ts）在跨应用共享类型时的作用和使用方式。

Answer 1

作用

1. 类型声明共享：.d.ts 文件用于声明 TypeScript 类型，在微前端跨应用场景下，它能让不同应用共享相同的类型定义，确保各个应用对相同数据结构有一致的类型认知。例如，不同微应用都涉及用户信息数据结构，通过共享的.d.ts 文件定义 User 类型，保证每个应用处理用户数据时类型一致。
2. 提高代码可维护性：当共享类型发生变化时，只需修改一处.d.ts 文件，所有依赖该类型的应用都能随之更新，避免在每个应用中重复修改相同类型定义，减少错误和维护成本。
3. 增强代码可读性：对于使用共享类型的开发者，.d.ts 文件清晰展示了类型结构和约束，使其更易理解代码意图和使用方式。

使用方式

1. 集中管理：创建一个公共的类型库，将所有跨应用共享的类型定义放在一个或多个.d.ts 文件中。例如，在一个微前端项目的根目录下创建 shared-types 文件夹，里面存放所有共享类型的.d.ts 文件。
2. 发布与引用：将公共类型库发布到 npm 等包管理器上，各微应用通过安装该包来引用共享类型。例如，npm install @company/shared - types，然后在应用中通过 import { SharedType } from '@company/shared - types' 引入所需类型。
3. 配置 TypeScript：在各微应用的 tsconfig.json 文件中，确保正确配置 paths 或 baseUrl 等选项，以便 TypeScript 能正确找到引入的共享类型定义文件。例如：

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

4. 按需导入：在各微应用的代码文件中，根据实际需求从共享类型库中导入相应的类型定义，像普通 TypeScript 类型一样使用。例如：

import { User } from '@company/shared - types';

function displayUser(user: User) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}