打字稿错误：环境模块声明仅在文件中的顶级允许

Question

目前正在尝试从Google服务获取数据。 我不确定在声明global时如何处理此错误。

链接到原始代码段： https：// https：//stackblitz.com/edit/githit/githiit/githubblit/githubub -mge1vg？file = index.ts

如何解决此问题，为什么要遇到错误。
代码的这一部分引发了一个错误：

仅在文件中的最高级别允许环境模块声明。

 declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;

这是整个代码：

import {useEffect, useState} from 'react';

type Geocode = {
  data?: google.maps.GeocoderResult | null;
  loading: boolean;
  error: string | null;
};

export const useReverseGeoCoding = ({latitude, longitude}: {latitude: number; longitude: number}): Geocode => {
  const [geocode, setGeocode] = useState<Geocode>({loading: false, error: null});

  useEffect(() => {
    const geocodeLatLng = async (geocoder: google.maps.Geocoder) => {
      /// Hard Coded for now
      const latlng = {
        lat: 52.509865,
        lng: -0.118092,
      };

      geocoder
        .geocode({location: latlng})
        .then(response => {
          if (response.results[0]) {
            console.log('response:', response);
            setGeocode({data: response.results[0], loading: false, error: null});
          } else {
            console.log('No results found');
          }
        })
        .catch(error => console.log('Geocoder failed due to: ' + error));
    };
    const initMap = (): void => {
      const geocoder = new google.maps.Geocoder();
      geocodeLatLng(geocoder);
    };
    initMap();
  }, [latitude, longitude]);

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;

  return geocode;
};

Answer 1

移动

declare global {
  interface Window {
    initMap: () => void;
  }
}

主函数有效，然后

  const initMap = () => {
    const geocoder = new google.maps.Geocoder();
    setGeocoder(geocoder);
  };
  window.initMap = initMap;

在文件中调用您将使用钩子，然后添加脚本标签以初始化Google API

 <script
      src={`https://maps.googleapis.com/maps/api/js?key=${your API key}&callback=initMap&v=weekly&libraries=geocoder`}
      defer
    ></script>