带有打字稿的谷歌地图

Question

我正在尝试使用 Typescript 将 google 地图 javascript API 包含到项目中，但不断收到错误“找不到命名空间 'google'.ts(2503) ”

我遵循官方文档（https://developers.google.com/maps/documentation/javascript/load-maps-js-api）并使用“使用动态库导入”方法将脚本标记包含在我的html文件中。我正在使用 Parcel 将 .ts 文件转换为 .js 并启动本地服务器。如果在这个阶段我打开 Chrome 浏览器控制台并输入“google”，那么它就可以访问。

对于下一步，在我的 .ts 文件中，我包含了官方文档中的代码：

let map: google.maps.Map; // Cannot find namespace 'google'.ts(2503)

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();

在官方文档中，在 Typescript 部分（https://developers.google.com/maps/documentation/javascript/using-typescript）中，它说“类型是自动生成的”，但我仍然使用“显式下载类型定义” npm i -D @types/google.maps " 但仍然出现错误。

如果有帮助的话，我已经在全球范围内安装了 Typescript 和 Parcel。

Answer 1

对于每个在更新的谷歌地图 javascript api 中遇到错误的人，他们只需要按照官方文档中的说明进行操作，并记住在初始化地图的打字稿文件中添加“ /// <reference types="@types/google.maps" /> EXACTLY AS IS”作为第一行。现在 google 命名空间错误将消失。

如果您遇到其他问题，请仔细阅读我上面的评论。我提到了一些我必须面对的错误/问题，并为它们提供了解决方案。