如何强制函数参数为只读数组以实现键值的字符串联合类型？

核心问题分析 #

你遇到的问题本质是普通数组的类型会被TypeScript自动拓宽，导致对象的choiceId从具体字面量类型（如"choiceId1"）变成宽泛的string类型，从而丢失了第二个参数的类型校验和自动补全能力。而as const断言或只读数组能保留字面量类型，但你希望找到更便捷的方式，甚至引导调用者传入符合要求的参数。

最优解决方案：使用const泛型（TypeScript 5.0+） #

TypeScript 5.0引入的**const泛型**可以自动保留数组和对象的字面量类型，无需手动添加as const断言，同时兼容普通数组和只读数组。修改你的函数如下：

type Choice = {
    choiceId: string,
    label: string
}

// 添加const修饰泛型参数，强制TypeScript保留字面量类型
function selectChoice<const TChoices extends readonly Choice[]>(
    choices: TChoices,
    initialChoiceId: TChoices[number]["choiceId"]
): Choice | null {
    return choices.find(choice => choice.choiceId === initialChoiceId) ?? null
}

// 普通数组也能自动保留字面量类型
const choices = [{ choiceId: "choiceId1", label: "label 1" }, { choiceId: "choiceId2", label: "label 2" }];

// 正确：有自动补全，类型校验通过
selectChoice(choices, "choiceId1");
// 错误：传入不存在的ID会触发类型检查
selectChoice(choices, "wrongChoiceId");

原理说明 #

const泛型会告诉TypeScript：不要拓宽泛型参数的类型，严格保留数组元素中所有字面量的具体类型。这样即使是普通的可变数组，TChoices[number]["choiceId"]也会被推断为"choiceId1" | "choiceId2"这样的联合类型，而非宽泛的string。

如何引导调用者传入只读数组？ #

严格来说，TypeScript无法完全禁止调用者传入普通数组，因为Array<T>是ReadonlyArray<T>的子类型，具备兼容性。但你可以通过以下方式引导调用者：

• 类型注释提示：在函数参数的JSDoc中明确说明推荐使用只读数组或as const断言：

  /**
   * 根据ID选择选项
   * @param choices 选项数组（推荐用as const断言或只读数组保留字面量类型）
   * @param initialChoiceId 选项ID（自动补全，类型安全）
   */
  function selectChoice<const TChoices extends readonly Choice[]>(
      choices: TChoices,
      initialChoiceId: TChoices[number]["choiceId"]
  ): Choice | null { ... }
  

• 辅助函数创建只读数组：提供一个工具函数让调用者生成符合要求的只读数组，确保类型正确：

  function createReadOnlyChoices<T extends string>(choices: readonly { choiceId: T; label: string }[]) {
      return choices;
  }
  
  // 调用者用这个函数创建数组，自动得到只读且带字面量类型的参数
  const choices = createReadOnlyChoices([{ choiceId: "choiceId1", label: "label 1" }] as const);
  

兼容旧版本TS的方案：使用as const断言 #

如果你的项目还未升级到TypeScript 5.0，最直接的方式是要求调用者使用as const断言来定义数组，确保字面量类型不被拓宽：

const choices = [{ choiceId: "choiceId1", label: "label 1" }] as const;

// 此时initialChoiceId会被推断为"choiceId1"，具备类型安全
selectChoice(choices, "choiceId1");

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