TypeScript方括号访问对象字段时Array.isArray类型守卫失效问题

TypeScript 4.7 已针对方括号元素访问场景的控制流分析类型窄化能力做了官方优化，但实际开发中判断访问字段是否为数组类型时，类型守卫并未按预期生效，触发报错：
Error: Type 'never[]' is not assignable to type 'string'.(2322)

即使已经通过Array.isArray做了类型校验，TypeScript仍判定方括号访问的字段可能为string类型。

首先定义部分字段为数组类型的Post类型：

type Post = {
  id: string;
  title: string;
  chapters: PostChapter[];
};

使用Post类型键名组成的数组，动态覆盖Post对象的对应字段值：

const fieldNamesToReplace: (keyof Post)[] = ["chapters"];

通过方括号访问对应字段时，即使前置了Array.isArray判断，TypeScript仍无法正确识别字段为数组类型。目前发现的可行变通方案是通过对象展开创建新对象覆盖字段，该写法不依赖方括号访问的控制流分析，可正常通过类型校验。

核心复现代码如下：

type PostChapter = {
  id: string;
  chapterTitle: string;
};

type Post = {
  id: string;
  title: string;
  chapters: PostChapter[];
};

const fieldNamesToReplace: (keyof Post)[] = ["chapters"];

const posts: Post[] = [
  {
    id: "1",
    title: "abc",
    chapters: [{ id: "1.1", chapterTitle: "def" }],
  },
];

const postsTransformed = posts.map((post) => {
  let postNew = { ...post };

  // 可正常通过校验：不依赖方括号赋值的类型窄化
  fieldNamesToReplace.forEach((fieldName) => {
    if (Array.isArray(postNew[fieldName])) {
      postNew = { ...postNew, [fieldName]: [] };
    }
  });

  // 触发类型报错
  fieldNamesToReplace.forEach((fieldName) => {
    if (Array.isArray(postNew[fieldName])) {
      postNew[fieldName] = [];
      // Error: Type 'never[]' is not assignable to type 'string'.(2322)

      const placeholder = postNew[fieldName];
    }
  });

  return postNew;
});

TypeScript 4.7 新增的方括号访问控制流窄化能力存在明确的适用边界：

• 仅支持键为固定字面量值的场景，对于存储在变量中的联合类型键（比如本例中fieldName的类型是keyof Post，对应"id" | "title" | "chapters"联合类型），窄化逻辑不会建立键和对应值类型的绑定关系。
• 执行Array.isArray(postNew[fieldName])判断时，TS只会将postNew[fieldName]这个临时表达式的类型窄化为数组，不会同步把fieldName的类型收窄到Post中数组类型对应的键（即"chapters"）。后续赋值时，TS仍认为fieldName可能指向id、title这类字符串类型字段，给这类字段赋值空数组就会触发类型不匹配报错。

• 方案1：使用已验证可行的对象展开写法，通过计算属性创建新对象完成赋值，TS会自动校验计算属性的键值匹配关系，不会触发类型报错。
• 方案2：对键做类型断言，明确告知TS当前操作的键对应数组类型字段，适合字段固定的简单场景：

fieldNamesToReplace.forEach((fieldName) => {
  if (Array.isArray(postNew[fieldName])) {
    postNew[fieldName as "chapters"] = [];
  }
});

• 方案3：封装自定义类型守卫收窄键的类型，适合字段多、需要复用逻辑的场景：

function isArrayField<T extends object>(
  obj: T,
  key: keyof T
): key is {
  [K in keyof T]: T[K] extends any[] ? K : never;
}[keyof T] {
  return Array.isArray(obj[key]);
}

// 调用示例
fieldNamesToReplace.forEach((fieldName) => {
  if (isArrayField(postNew, fieldName)) {
    postNew[fieldName] = []; // 无类型报错
  }
});

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