fetch调用谷歌地理API时any值不安全操作lint报错如何修复

报错根源 #

这两个@typescript-eslint/no-unsafe-*规则触发的核心原因有两个：

• 你使用的as类型断言没有被ESLint的类型检查正确识别，且Response.json()原生返回类型是Promise<any>，直接断言的写法在严格lint规则下不会被认可为有效类型收窄
• 大概率你没有正确安装谷歌地图的TS类型包，导致google.maps.GeocoderResponse类型本身被识别为any，断言等于没有生效

修复步骤 #

• 先安装谷歌地图对应的官方TS类型依赖，执行命令：
  npm install -D @types/google.maps
  安装完成后检查tsconfig.json的compilerOptions.types配置，确保没有手动排除该类型包，默认情况下安装后TS会自动加载对应的类型声明。

• 改写fetch的类型标注方式，不要在返回值上直接用as硬断言，使用res.json()原生支持的泛型参数声明返回类型，这种写法能被ESLint规则正确识别，同时建议补充HTTP状态校验和错误捕获，避免接口异常时代码崩溃：

fetch(uri)
  .then(res => {
    if (!res.ok) {
      throw new Error(`地理编码请求异常，状态码：${res.status}`)
    }
    return res.json<google.maps.GeocoderResponse>()
  })
  .then(data => {
    // 此处data会被正确推导为google.maps.GeocoderResponse类型，不会再触发any相关报错
    const result = data.results[0].geometry;
    // 后续业务逻辑
  })
  .catch(err => {
    console.error('地理编码请求失败', err)
  })

额外加固方案 #

如果担心接口返回格式和类型声明不一致，还可以加一层简单的类型守卫做运行时校验，这种写法完全符合严格lint规则的要求，不会出现unsafe赋值/属性访问的问题：

fetch(uri)
  .then(res => res.json())
  .then((rawData): rawData is google.maps.GeocoderResponse => {
    return (
      typeof rawData === 'object' &&
      rawData !== null &&
      'results' in rawData &&
      Array.isArray((rawData as { results: unknown[] }).results)
    )
  })
  .then(isValidResponse => {
    if (!isValidResponse) {
      throw new Error('接口返回数据格式不符合预期')
    }
    const result = isValidResponse.results[0].geometry;
  })

以上写法不需要禁用任何lint规则，同时比原有硬断言的写法更健壮，能覆盖接口报错、返回格式异常等边界场景。

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