如何定义Angular UI组件库中多模块共用的类型？

先聊聊你提到的两个选项的问题：

• 选项1（重复定义不同名称的类型）：绝对是下下策。重复写不仅纯浪费时间，后期改需求时还得挨个修改每个模块里的类型，很容易漏改导致类型不一致，排查问题特别麻烦。
• 选项2（通用类型文件）：方向是对的，但“需要从两个不同位置导入”的问题完全可以通过小技巧解决，而且还有更灵活的第三种方案。

第三种方案：组件模块导出共享类型 + 可选根聚合 #

具体操作步骤： #

1. 先把共享类型统一放在一个通用文件里，比如src/types/common.ts：

export interface IUIItem {
  id: number;
  title: string;
}

2. 在每个需要用到该类型的组件模块里，把组件和共享类型一起导出。比如列表组件的src/components/List/index.ts：

import { IUIItem } from '../../types/common';
// 直接导出共享类型
export { IUIItem };
export default function List({ items }: { items: IUIItem[] }) {
  // 组件实现代码
}

3. （可选优化）如果想让使用者更省心，在库的根入口src/index.ts里把所有组件和对应的类型聚合起来：

import List, { IUIItem as ListItem } from './components/List';
import Table, { IUIItem as TableItem } from './components/Table';

export { List, Table, ListItem, TableItem };

这个方案的优势： #

• 不用重复定义类型，维护时只需要修改通用文件即可
• 使用者不用记通用类型文件的路径：要么直接从组件模块同时导入组件和类型（import List, { IUIItem } from 'your-lib/List'），要么从根入口一次性拿齐需要的内容（import { List, ListItem } from 'your-lib'）
• 要是某个组件需要扩展这个类型，直接在自己模块里定义子类型就行，不会影响其他组件：

// List模块内扩展类型
import { IUIItem } from '../../types/common';
export interface IListItem extends IUIItem {
  isChecked?: boolean;
}
export default function List({ items }: { items: IListItem[] }) {
  // 组件实现代码
}

退一步：优化选项2的导入体验 #

如果不想搞根聚合，也可以直接在每个组件模块里重新导出通用类型，比如Table模块：

// src/components/Table/index.ts
export type { IUIItem } from '../../types/common';
export default function Table({ data }: { data: IUIItem[] }) {
  // 组件实现代码
}

这样使用者只需要从Table模块导入类型，不用单独去通用文件里查找，完美解决选项2的导入痛点。

内容的提问来源于stack exchange，提问作者char m