TypeScript联合类型数组访问时的类型推断问题

原因 #

TypeScript的控制流分析无法跨函数边界追踪变量的类型窄化结果。虽然在every回调外面已经把options2转成了数组，但回调函数是独立的作用域，TypeScript不会把外部的类型窄化结果带到回调里面，所以依然认为options2是Option | Option[]的联合类型，自然不允许用number索引。

正确解决方法 #

方法1：用const变量存储转换后的数组（最安全推荐） #

把转换后的数组赋值给const声明的变量，因为const变量的类型一旦确定就不会改变，TypeScript能在回调里正确识别它的类型：

export const areOptionsEqual = (
  options1: Option | Option[],
  options2: Option | Option[],
): boolean => {
  // 转换为数组并赋值给const变量，明确类型为Option[]
  const opts1 = Array.isArray(options1) ? options1 : [options1];
  const opts2 = Array.isArray(options2) ? options2 : [options2];

  if (opts1.length !== opts2.length) {
    return false;
  }

  return opts1.every((option1, index) => {
    const { name: name1, options: nestedOptions1 } = option1;
    const { name: name2, options: nestedOptions2 } = opts2[index]; // 无错误

    const areNestedOptionsEqual = !!nestedOptions1 === !!nestedOptions2;
    if (name1 !== name2 || !areNestedOptionsEqual) {
      return false;
    }

    if (nestedOptions1 && nestedOptions2) {
      return areOptionsEqual(nestedOptions1, nestedOptions2);
    }

    return true;
  });
};

方法2：在回调内使用类型断言（简洁但需自行保证安全） #

如果不想新增变量，可以直接在访问时用类型断言告诉TypeScriptoptions2是数组：

const { name: name2, options: nestedOptions2 } = (options2 as Option[])[index];

注意：这种方式会跳过TypeScript的类型检查，必须确保逻辑上options2此时一定是数组，否则后续代码改动可能引发运行时错误。

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