如何实现NgRx SignalStore中不同长度参数数组与方法的类型安全约束？

需求背景 #

想要实现NgRx SignalStore的withDetailFetching特性，期望语法如下：

withDetailFetching({ 
   contact: {
       argsFromRouterParams: ['contactId', 'tenantId'],
       method: (contactId: string, tenantId: string) => { }
   },
   userId: {
       argsFromRouterParams: ['userId'],
       method: (userId: string) => { }
   }
})

核心要求：通过类型约束，确保每个配置项的method参数数量与对应的argsFromRouterParams数组长度严格一致。

原有实现问题 #

之前的类型定义仅支持所有配置项的argsFromRouterParams数组长度相同的场景，无法兼容不同长度的情况：

class WithDetailFetchingParam<T extends string[]> {
    argsFromRouterParams: T;
    method: () => (...args: NoInfer<T>) => any;
}

export function withDetailFetching<const P extends string[] >(param: { [key: string]: WithDetailFetchingParam<P>} ) {
// implementation
}

比如同时包含2个参数和1个参数的配置会触发类型错误，无法正常使用。

解决方案 #

需要让每个配置项独立维护自己的类型参数，而非用统一的类型约束所有项。以下是优化后的类型定义：

// 单个配置项的类型，T为路由参数名组成的只读元组
type DetailFetchConfig<const T extends readonly string[]> = {
  argsFromRouterParams: T;
  // method参数类型与T的元素一一对应，这里默认参数为string类型
  method: (...args: { [K in keyof T]: string }) => any;
};

// 定义函数参数类型：任意键名，每个值符合DetailFetchConfig
export function withDetailFetching<
  const P extends Record<string, DetailFetchConfig<readonly string[]>>
>(params: P) {
  // 你的业务实现逻辑
}

关键优化点 #

• 独立类型参数：每个DetailFetchConfig拥有自己的T类型参数，对应各自的路由参数元组，支持不同配置项使用不同长度的数组。
• 精确元组推导：使用const断言让TypeScript推导出精确的元组类型（而非宽泛的string[]），确保参数数量和顺序的严格匹配。
• 类型安全校验：当method的参数数量与argsFromRouterParams长度不匹配时，TypeScript会直接抛出类型错误。

测试验证 #

合法场景（正常运行）

withDetailFetching({ 
   contact: {
       argsFromRouterParams: ['contactId', 'tenantId'],
       method: (contactId: string, tenantId: string) => { }
   },
   userId: {
       argsFromRouterParams: ['userId'],
       method: (userId: string) => { }
   }
});

非法场景（类型报错）

// 报错：method参数数量与argsFromRouterParams长度不匹配
withDetailFetching({ 
   contact: {
       argsFromRouterParams: ['contactId', 'tenantId'],
       method: (contactId: string) => { } // 缺少一个参数
   }
});

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