Свойство "Google" не существует по типу "Окно"

Question

Я пытаюсь использовать Google Maps Api на ReactJS с минимально возможными модулями npm. Поэтому я сам добавляю скрипт в объект окна. Но Typescript скачет после поговорки: «Свойство« Google »не существует для типа« Окно »».

Я попытался добавить свойство google: any в интерфейс Windows, но оно не работает, и я не могу найти подходящий интерфейс внутри типов 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);
  }

}

-------------- UPDATE ------------------

Я создал этот интерфейс:

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

И добавил свойство Google в Window:

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

И он по-прежнему возвращает ту же ошибку.

Answer 1

почему вы используете window.google, а не так

, просто добавьте это поверх вашего класса за пределами

declare const google: any;

и затем используйте так.

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

или установите набор текста.

Answer 2

Что бы ни стоило, исправление, которое работало для меня, состояло в том, чтобы добавить его как тег <script> к index.html.

Преимущество заключается в том, что теперь вам не нужно использовать withScriptjs и иметь mapURL для каждого компонента.

Answer 3

Вам нужно определение TypeScript Google Map, это можно сделать с помощью команды npm i @types/googlemaps --save-dev