如何编写可自动识别传入类型的TypeScript Filter接口？

1. 重构Filter接口为泛型类型 #

将原来的Filter类改为泛型接口，通过泛型参数定义每个键对应的data类型，既保留类型检查能力，又能灵活适配不同的data类型：

// filter.interface.ts
// 单个过滤项的基础类型，支持指定data的具体类型
export type FilterItem<T> = {
  isLoading: boolean;
  data: T;
};

// 整体Filter类型，泛型T描述每个键对应的data类型
export type Filter<T extends Record<string, any>> = {
  [K in keyof T]: FilterItem<T[K]>;
};

2. 在组件中使用泛型Filter #

在组件里，直接通过泛型参数指定当前filters包含的键和对应data类型，IDE会自动识别每个data的具体类型：

// component.ts
public filters: Filter<{
  addressBookTypes: AddressBookType[];
  // 后续新增过滤项直接在这里添加即可，比如：
  // users: User[];
  // departments: Department[];
}> = {
  'addressBookTypes': {
    isLoading: false,
    data: [] as AddressBookType[]
  }
};

3. 可选：用工具函数自动推断类型 #

如果不想手动编写泛型参数，可以创建工具函数让TypeScript自动推断类型，进一步简化代码：

// filter.interface.ts 新增工具函数
export function createFilters<T extends Record<string, any>>(filters: Filter<T>): Filter<T> {
  return filters;
}

组件中使用方式：

// component.ts
public filters = createFilters({
  'addressBookTypes': {
    isLoading: false,
    data: [] as AddressBookType[]
  },
  'users': {
    isLoading: true,
    data: [] as User[]
  }
});

方案优势 #

• 每个data的类型会被严格检查，避免类型错误
• 无需提前定义所有可能的接口组合，新增过滤项只需在使用时添加对应类型
• 保留IDE的代码提示，避免拼写错误或结构错误

内容的提问来源于stack exchange，提问作者Kristjan O.