打字稿错误：环境模块声明只允许在文件的顶层

Question

Currently trying to fetch data from a google service. I'm not sure how I should handle this error when declaring global .

Link to the original code snippet: https://stackblitz.com/edit/github-mge1vg?file=index.ts

How would solve this and why am I getting the error.
This part of the code throws an error:

An ambient module declaration is only allowed at the top level in a file.

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

Here is the whole code:

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

Moving

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

Outside of the main function works, then calling

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

Within the file you will use the hook, and add a script tag to initialize the Google API

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