Vue项目执行npm run build时出现Cannot find namespace 'google'错误求助

1. 安装Google Maps官方类型声明包 #

这是解决类型缺失问题的核心步骤，直接安装官方维护的类型定义：

npm install @types/google.maps --save-dev

2. 配置TypeScript加载全局类型 #

如果安装后仍报错，在项目的tsconfig.json（或Vue CLI生成的tsconfig.app.json）中，将google.maps添加到types数组，确保编译时TS能识别该全局命名空间：

{
  "compilerOptions": {
    // 保留原有配置...
    "types": [
      "google.maps"
    ]
  }
}

3. 代码中确保类型安全的使用方式 #

根据你选择的集成方式，调整代码逻辑，让TS在google对象可用后再进行类型检查：

• 若使用@googlemaps/js-api-loader：

import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: '你的API密钥',
  version: 'weekly'
});

loader.load().then(() => {
  // 此处TS可正常识别google.maps类型
  const map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
  });
});

• 若直接加载script标签：

import { onMounted } from 'vue';

onMounted(() => {
  // 通过类型断言明确window.google的类型
  const google = window.google as typeof google;
  const marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: mapInstance
  });
});

4. 排查额外可能的问题 #

• 检查tsconfig.json中noImplicitAny是否设为true，若是则确保所有google相关变量都有明确类型，避免隐式any触发错误
• 不要依赖// @ts-ignore跳过错误，这只是临时规避，安装类型包才是根本解决方案
• 确认@types/google.maps版本与你使用的Google Maps API版本兼容，优先安装最新版本

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