如何配置React Hook泛型以实现返回对象键的自动补全提示？

你的问题核心在于泛型和返回类型的定义没有让TypeScript正确推导返回对象的键。原代码里的R extends keyof T是多余的，而且返回对象的类型定义{ [keys: R]: string }并没有正确关联到传入的translate参数的具体键。下面是修复后的方案：

修复后的Hook代码 #

interface TranslateEntry {
  ru: string;
  en: string;
}
// 用泛型T约束传入的翻译对象，T的每个键对应TranslateEntry类型
export function useTranslate<T extends Record<string, TranslateEntry>>(translate: T) {
  const lang = Location.language;
  // 用映射类型定义返回值：T的每个键对应string类型
  const response: { [K in keyof T]: string } = {} as { [K in keyof T]: string };
  
  // 改用for...of循环，避免Object.keys的类型丢失问题
  for (const key of Object.keys(translate) as Array<keyof T>) {
    response[key] = lang === 'ru-RU' ? translate[key].ru : translate[key].en;
  }
  
  return response;
}

关键调整说明 #

• 简化泛型定义：只保留T extends Record<string, TranslateEntry>，让TypeScript自动推导传入的翻译对象的具体键，不需要额外的R泛型。
• 映射类型返回值：使用{ [K in keyof T]: string }，这个类型会根据T的所有键生成一个新的对象类型，每个键对应的值都是string，这样IDE就能准确识别返回对象的所有键。
• 修复循环类型问题：原代码中Object.keys(translate)返回的是string[]，TypeScript无法确定这些字符串就是T的键，所以我们用as Array<keyof T>断言类型，确保循环时的键能匹配T的键类型。

使用示例（自动补全生效） #

const translate = useTranslate({
  home: { en: 'Home', ru: 'Главная' },
  shop: { en: 'Shop', ru: 'Магазин' },
  suppliers: { en: 'Suppliers', ru: 'Поставщикам' },
  faq: { en: 'FAQ', ru: 'FAQ' },
  reviews: { en: 'Reviews', ru: 'Отзывы' },
});

// 现在IDE会自动提示translate.home、translate.shop等所有键
console.log(translate.home); // 自动补全生效！

这样修改后，TypeScript就能完全推导返回对象的结构，IDE自然会提供对应的键名自动补全了。

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