如何为createStyleSheet添加可选泛型参数并保留类型推断

问题背景 #

现有TypeScript函数声明：

export function createStyleSheet<S extends StyleSheet>(stylesheet: S) {}

想要给它添加第二个泛型参数P，同时满足以下需求：

• S能通过第一个参数自动推断类型
• P作为可选参数，不需要每次调用都显式指定
• 主函数返回的内部函数（如createSelector、createSomething等）无需单独声明泛型P，直接复用主函数的P参数，避免重复定义

尝试将泛型改为<P, S extends StyleSheet>后，调用时被提示需要传入2个泛型参数，且不确定S是否还能正常推断。

解决方案 #

1. 给泛型参数P设置默认值 #

把P放在泛型列表的前面，并为它设置一个默认类型（比如unknown，或者你业务中需要的基础类型），这样既让P变成可选参数，又不会影响S的自动推断：

// 为P设置默认类型，这里用unknown示例，可根据实际需求替换
export function createStyleSheet<P = unknown, S extends StyleSheet>(stylesheet: S) {
  // 内部函数直接复用泛型P，无需再次声明
  function createSelector(key: keyof P) {
    // 业务逻辑实现
  }

  function createSomething(param: P) {
    // 业务逻辑实现
  }

  return { createSelector, createSomething };
}

2. 调用示例 #

• 不需要指定P时，直接调用，S会自动推断：

  const myStyles = { /* 符合StyleSheet结构的样式定义 */ };
  const { createSelector } = createStyleSheet(myStyles);
  

• 需要指定P时，显式传入泛型参数即可，S依然能自动推断：

  type MyProps = { theme: string; size: number };
  const { createSomething } = createStyleSheet<MyProps>(myStyles);
  

核心原理 #

• TypeScript中，带有默认值的泛型参数会被视为可选参数，调用时可不显式传入
• 当只显式指定部分泛型参数时，TypeScript会从左到右匹配，未指定的泛型参数（此处为S）会通过函数的入参自动完成类型推断

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