TypeScript项目引入Google Maps JS API时遇「找不到google命名空间」错误

以下是针对该问题的可行解决方案：

1. 检查TypeScript配置文件 #

确保你的tsconfig.json正确包含Google Maps的类型定义：

• 打开tsconfig.json，确认compilerOptions里的types数组包含"google.maps"：

{
  "compilerOptions": {
    "types": ["google.maps"]
  }
}

• 若未配置types字段，可检查typeRoots是否指向node_modules/@types（默认已包含，但手动指定时需确保覆盖完整路径）：

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"]
  }
}

2. 显式引用类型定义 #

在你的TypeScript文件顶部添加类型引用指令，强制TypeScript识别Google Maps的类型：

/// <reference types="@types/google.maps" />

let map: google.maps.Map;

async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

3. 重新安装依赖并清理缓存 #

依赖安装不完整可能导致类型无法识别，执行以下步骤修复：

• 删除node_modules文件夹和package-lock.json（或yarn.lock）
• 重新执行npm install
• 重启Parcel开发服务器，确保缓存被清空

4. 调整动态导入的类型写法 #

若上述方法仍无效，可修改代码绕过全局命名空间的提前识别：

async function initMap(): Promise<void> {
  const mapsLibrary = await google.maps.importLibrary("maps");
  const Map = mapsLibrary.Map;
  const map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

这种写法无需提前声明google.maps.Map类型，直接使用动态导入后返回的构造函数，避免命名空间识别问题。

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