如何让TypeScript接口中getCacheKey参数类型匹配sourceFn参数类型

你需要通过泛型来关联sourceFn和getCacheKey的参数类型，原代码中Parameters<this['sourceFn']>无法在接口定义阶段正确解析类型绑定。以下是两种可行的实现方案：

方案1：直接指定参数类型数组 #

定义泛型接口，用泛型参数TArgs明确sourceFn的参数类型，让getCacheKey直接复用该类型：

interface CacheCheck<TArgs extends any[]> {
  sourceFn: (...args: TArgs) => Promise<any>;
  getCacheKey: (options: TArgs) => string | undefined;
}

使用示例：

// 明确参数类型为[string, number]
const userCacheConfig: CacheCheck<[string, number]> = {
  sourceFn: async (userId, page) => {
    return await fetchUserList(userId, page);
  },
  getCacheKey: ([userId, page]) => {
    return `user_list_${userId}_page_${page}`;
  }
};

方案2：基于sourceFn类型推导参数 #

让泛型参数直接代表sourceFn的类型，通过Parameters<TSourceFn>自动提取参数类型，更灵活：

interface CacheCheck<TSourceFn extends (...args: any[]) => Promise<any>> {
  sourceFn: TSourceFn;
  getCacheKey: (options: Parameters<TSourceFn>) => string | undefined;
}

使用示例（TypeScript会自动推导类型）：

const productCacheConfig = {
  sourceFn: async (productId: string, locale: 'zh' | 'en') => {
    return await fetchProductDetail(productId, locale);
  },
  getCacheKey: ([productId, locale]) => {
    return `product_${productId}_${locale}`;
  }
} satisfies CacheCheck<typeof productCacheConfig.sourceFn>;

为什么原代码无法运行？ #

原接口中this['sourceFn']在类型解析时仅能识别为(...args: any) => Promise<any>，Parameters会返回any[]，无法在具体实现时绑定sourceFn和getCacheKey的参数类型。泛型的作用就是在接口使用时动态关联两个成员的类型，确保参数一致性。

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