Typescript报错：找不到名称‘google’，保存两次文件可运行求解答

我之前在开发Ionic项目时碰到过一模一样的问题：TypeScript突然抛出**Cannot find name ‘google’**的错误，精准定位到google-map.ts文件第22行。最离谱的是，只要连续保存两次这个文件，代码居然又能正常跑了，当时我也是一脸懵。

先贴一下相关代码和错误信息，方便大家对照：

组件代码片段 #

ngOnInit(){ 
  this.initMap(); 
} 

initMap(){ 
  let coords = new google.maps.LatLng(37.992667,-1.1146491); 
  let mapOptions: google.maps.MapOptions= { 
    center: coords, 
    zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  } 
  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions) 
}

错误详情 #

Typescript: C:/ionic/restaurante/IESAljada/src/components/google-map/google-map.ts, line: 22
L21: initMap(){ 
L22: let coords = new google.maps.LatLng(37.992667,-1.1146491); 
L23: let mapOptions: google.maps.MapOptions= { 

原因分析 #

后来琢磨了下，这个现象核心原因应该是Google Maps JS SDK的加载时机和TypeScript类型检查的时机不匹配：

• 第一次编译/热重载时，Google Maps的全局google对象还没加载完成，TypeScript编译器找不到对应的类型定义，直接报错；
• 保存第二次触发热重载时，SDK已经加载完毕，google对象存在，编译器自然就不报错了。
  另外也有可能是TypeScript没有正确识别google的类型定义导致的。

靠谱的解决方案 #

我试了几个办法，亲测有效：

1. 确保SDK在组件初始化前加载

把Google Maps的脚本放在index.html的<head>里，或者用异步加载+等待的方式，保证initMap执行时google已经存在：

<!-- index.html的head中添加，替换成你的API_KEY -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的Google地图API密钥" async defer></script>

如果用异步加载，组件里可以加个监听逻辑：

ngOnInit() {
  // 轮询等待google对象加载完成
  const loadChecker = setInterval(() => {
    if (window.google) {
      clearInterval(loadChecker);
      this.initMap();
    }
  }, 100);
}

2. 配置TypeScript类型定义

首先安装Google Maps的类型包：

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

然后在tsconfig.json里全局配置类型：

{
  "compilerOptions": {
    // 其他配置保持不变
    "types": ["google.maps"]
  }
}

如果不想全局配置，也可以直接在组件顶部加一行声明：

declare var google: typeof google;

3. 临时解决：重启开发服务器

如果是热重载缓存的问题，重启一下Ionic/Angular的开发服务器有时候也能解决，但这只是临时方案，还是优先前面两个方法彻底解决。

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