TypeScript遍历FooCollection时forEach不存在错误的解决疑问

问题根源 #

你遇到的核心问题是TypeScript对索引访问的类型收窄限制：

• 在bar函数中，Object.keys(data)返回的是string[]类型（而非keyof FooCollection），当你通过data[key]访问值时，TypeScript无法确定该索引对应的具体类型。哪怕用Array.isArray(data[key])做了判断，它也没法把data[key]的类型从Array<string> | string收窄到Array<string>，所以会提示forEach不存在。
• 而baz函数的参数是直接传入的Foo类型值，TypeScript对独立变量的类型收窄逻辑是有效的：用Array.isArray判断后，能正确识别出当前值是数组类型，因此forEach调用不会报错。

qux方案的优劣分析 #

优点 #

1. 彻底解决类型收窄问题：将单个Foo类型值的处理逻辑抽离到baz函数后，参数类型明确，TypeScript能正常完成类型收窄，消除编译报错。
2. 代码复用性提升：如果后续其他场景需要处理Foo类型值，直接调用baz即可，无需重复编写判断与遍历逻辑。
3. 职责更清晰：qux函数专注于遍历集合，baz专注于单值处理，代码结构更易读、易维护。

缺点 #

1. 微小的性能开销：多了一层函数调用，但这种开销在绝大多数业务场景下可以忽略不计，只有极端高频的循环场景才需要考虑。
2. 简单逻辑的冗余感：如果Foo类型的处理逻辑非常简单，单独抽成函数会显得有点多余，但从长期维护角度看，这种拆分利大于弊。

其他可行的替代方案 #

除了抽离函数，还有两种更直接的方式解决bar函数的报错：

1. 先赋值给变量再判断 #

把data[key]赋值给一个独立变量，TypeScript对变量的类型收窄是有效的：

type Foo = Array<string> | string;
type FooCollection = { [key: string]: Foo }

const bar = (data: FooCollection) => {
  Object.keys(data).forEach((key) => {
    const value = data[key];
    if (Array.isArray(value)) {
      value.forEach((v, i) => {
        console.log(v, i);
      });
    }
  });
};

2. 断言Object.keys的返回类型 #

将Object.keys(data)断言为keyof FooCollection的数组，让TypeScript明确索引的类型：

const bar = (data: FooCollection) => {
  (Object.keys(data) as Array<keyof FooCollection>).forEach((key) => {
    if (Array.isArray(data[key])) {
      data[key].forEach((v, i) => {
        console.log(v, i);
      });
    }
  });
};

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