类型“窗口”上不存在属性“谷歌”答案

【问题标题】：Property 'google' does not exist on type 'Window'类型“窗口”上不存在属性“谷歌”
【发布时间】：2019-08-23 03:43:27
【问题描述】：

我正在尝试在 ReactJS 上使用 Google Maps Api 和尽可能少的 npm 模块。所以我自己将脚本添加到窗口对象。但是 Typescript 在说：“类型 'Window' 上不存在属性 'google'”。

我尝试将属性 google: any 添加到 Window 界面但它不起作用，并且我在 google 类型中找不到合适的界面。

这是我的代码：

private initMap = () => {
this.setState({
  map: new window.google.maps.Map(document.getElementById("map"), {
    center: {
      lat: this.state.userPosition.lat,
      lng: this.state.userPosition.lng
    },
    zoom: this.state.zoom,
    mapTypeId: window.google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true
  })
});

this.setState({
  rangeCircle: new window.google.maps.Circle({
    strokeColor: "#007AFF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#007AFF",
    fillOpacity: 0.35,
    map: this.state.map,
    center: {
      lat: this.state.userPosition.lat,
      lng: this.state.userPosition.lng
    },
    radius: this.state.radius * 1000
  })
});

this.setState({
  centerMarker: new window.google.maps.Marker({
    icon: { locationIcon },
    map: this.state.map,
    position: this.state.userPosition
  })
});

};

private renderMap = () => {
    loadScript(
      "https://maps.googleapis.com/maps/api/js?key=*********&callback=initMap"
    );
    window.initMap = this.initMap;
  };
}

function loadScript(url: string) {
  const index = window.document.getElementsByTagName("script")[0];
  const script = window.document.createElement("script");

  script.src = url;
  script.async = true;
  script.defer = true;

  if (index.parentNode) {
    index.parentNode.insertBefore(script, index);
  }

}

-------------更新------

我创建了这个界面：

interface IGoogle {
    maps: {
        Circle: google.maps.Circle;
        Map: google.maps.Map;
        Marker: google.maps.Marker;
    }
}

并在 Window 中添加了一个 google 属性：

interface Window extends EventTarget, WindowTimers, WindowSessionStorage, WindowLocalStorage, WindowConsole, GlobalEventHandlers, IDBEnvironment, WindowBase64, GlobalFetch, WindowOrWorkerGlobalScope, WindowEventHandlers {
    google: IGoogle;
    initMap: () => void;

它仍然返回相同的错误。

【问题讨论】：

标签： reactjs typescript google-maps-api-3

【解决方案1】：

你需要谷歌地图的TypeScript定义，这可以通过命令npm i @types/googlemaps --save-dev来实现

【讨论】：

我已经添加了，我用它来定义圆和标记，但是整个东西没有类型，只是对于 Map 和 Circle 等不同的类，它都包裹在一个命名空间。
如果您仍然遇到问题，请发布您的 tsconfig.json
此包已移至@types/google.maps。

【解决方案2】：

为什么你使用window.google而不是这样

只需将其添加到您的课外

declare const google: any;

然后像这样使用。

map: new google.maps.Map(document.getElementById("map"),

或安装类型。

【讨论】：

【解决方案3】：

不管怎样，对我有用的解决方法是将它作为<script> 标记添加到index.html。

好处是现在你不需要使用withScriptjs 并且在每个组件上都有一个mapURL。

【讨论】：

【解决方案4】：

如果您想从窗口访问谷歌地图属性（如果它已经加载），这可能会有所帮助。

const { maps } = (window as any).google;

【讨论】：

【解决方案5】：

添加

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>

到为我工作的index.html 文件。

【讨论】：