如何为useTranslations函数标注与可变参数等长的数组返回类型？

要让useTranslations的返回类型和输入键的数量严格匹配，避免解构时出现数量错误，可以利用TypeScript的泛型元组类型来实现类型约束。

解决方案代码 #

// 假设你已有翻译逻辑的translate函数
const translate = (key: string): string => {
  // 这里替换为你的实际翻译逻辑，比如从国际化字典中取值
  return key;
};

export function useTranslations<T extends readonly string[]>(...keys: T): { [I in keyof T]: string } {
  // 用类型断言告诉TS，map返回的数组是对应长度的元组
  return keys.map(k => translate(k)) as { [I in keyof T]: string };
}

原理说明 #

• 泛型T会捕获输入keys的具体元组结构（包括长度和每个元素的类型）
• 返回类型{ [I in keyof T]: string }会生成一个和输入元组长度完全一致的字符串元组，每个位置的类型都是string
• 使用as断言是因为Array.map默认返回string[]，需要手动指定其为对应长度的元组类型

使用示例 #

调用函数时，TypeScript会自动推导返回元组的长度，解构时数量不匹配会直接在编译阶段报错：

// 正确用法：解构数量和输入键数量一致
const [greeting, farewell] = useTranslations('hello', 'goodbye');

// 错误用法：解构数量多于输入键数量，TS会提示类型错误
// const [a, b, c] = useTranslations('hello', 'goodbye');

这种实现方式彻底解决了普通string[]返回类型无法约束解构数量的问题，让类型检查提前到编译阶段，避免运行时可能出现的错误。

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