如何让TypeScript函数参数类型关联兄弟参数键并实现自动补全

原代码的核心问题是keys参数被定义成{ [x: string]: string }这类索引签名类型，TypeScript会丢失传入对象的具体键名信息，导致回调里的c参数无法获得精确的自动补全支持。

要实现需求，需要通过泛型捕获keys参数的具体键类型，让TypeScript能跟踪到传入的键名集合。修改后的代码如下：

export const colors = <K extends string>(
  keys: Record<K, string> = {} as Record<K, string>,
  modes: ((c: Record<K, string>) => object) | object = {},
  initialColorMode = 'light'
) => {
  return typeof modes === 'function' ? modes(keys) : modes
}

// 使用示例
colors(
  {
    white: '#FFFFFF',
    light: '#DFDFDD',
    dark: '#000000',
    yellow: '#FFB300',
    blue: '#0759F9',
  },
  (c) => ({
    light: {
      text: c.dark, // 现在支持键名自动补全
      background: c.white,
      primary: c.yellow,
    },
    dark: {
      text: c.light,
      background: c.dark,
      primary: c.blue,
    },
  }),
  'light'
)

关键细节说明： #

• 泛型K extends string用于捕获keys对象的所有字符串键名，TypeScript会自动推断出传入对象的具体键集合（比如示例中的"white" | "light" | "dark" | "yellow" | "blue"）。
• Record<K, string>替代原有的索引签名，明确表示对象的键为K类型、值为string类型，完整保留了键的具体信息。
• keys的默认值需要用as Record<K, string>做类型断言，因为空对象无法直接匹配泛型约束的Record<K, string>类型。

修改后，回调函数里的c参数会和keys拥有完全一致的键名，编辑器就能提供准确的自动补全提示了。

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