已完全类型化代码触发ESlint@typescript-eslint/no-unsafe-assignment规则问题

问题场景 #

我定义了完全类型化的变量，全程未使用any：

const cartItems: {
    quantity: number;
    product: {
        id: number;
        price: number | null;
        partNumber: string;
        partDescription: string;
        images: {
            key: string;
        }[];
    };
}[] = []; // 示例初始化值

直接返回cartItems时一切正常，但执行如下仅做对象展开复制的map操作时，会触发ESLint规则@typescript-eslint/no-unsafe-assignment：

return cartItems.map((item) => ({
  ...item,
  product: {
    ...item.product
  }
}));

明明TypeScript能自动推断出返回类型，却必须手动指定返回类型才不会触发规则，现在需要重新映射images字段，受限于这个规则无法操作，求解决办法。

可行解决方案 #

1. 显式定义复用类型（最稳妥） #

把CartItem的类型抽成独立定义，后续map时显式指定返回类型，既能规避ESLint误判，还能让代码类型更清晰：

// 抽离可复用的类型定义
type CartItem = {
    quantity: number;
    product: {
        id: number;
        price: number | null;
        partNumber: string;
        partDescription: string;
        images: {
            key: string;
        }[];
    };
};

const cartItems: CartItem[] = [];

return cartItems.map((item): CartItem => ({
  ...item,
  product: {
    ...item.product,
    // 这里可以自由修改images字段，比如映射为带完整URL的格式
    images: item.product.images.map(img => ({ 
      key: img.key, 
      url: `https://cdn.example.com/${img.key}` 
    }))
  }
}));

2. 调整ESLint规则配置 #

如果不想手动指定类型，可以在ESLint配置中针对数组map操作放宽检查——因为TypeScript对数组方法的返回类型推断通常是可靠的。在.eslintrc.js（或对应配置文件）中修改规则：

module.exports = {
  // 其他配置项...
  rules: {
    "@typescript-eslint/no-unsafe-assignment": [
      "error",
      {
        // 允许数组map方法的赋值操作跳过规则检查
        allow: ["Array.prototype.map"]
      }
    ]
  }
};

注意：这种方式要谨慎使用，避免过度放宽导致真正的any类型赋值被遗漏。

3. 检查并完善TypeScript编译配置 #

如果TypeScript的strict模式未开启，可能会导致类型推断精度不足，让ESLint产生误判。检查tsconfig.json的配置：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    // 其他严格模式相关配置
  }
}

开启严格模式后，TypeScript的类型推断会更精准，ESLint的规则判断也会更贴合实际类型。

4. 类型断言临时绕过（仅应急） #

如果只是临时解决问题，可以用类型断言明确告诉TypeScript和ESLint返回值的类型，但这种方式会跳过类型检查，不推荐长期使用：

return cartItems.map((item) => ({
  ...item,
  product: {
    ...item.product,
    images: item.product.images.map(img => ({ key: img.key }))
  }
})) as typeof cartItems;

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