TypeScript React Google Maps: 'google' does not exist

Question

I have loaded the google maps Javascript API in the public/index.html and in dev tools console I can log window.google.maps just fine.

But TypeScript doesn't know its there and I get this error Property 'google' does not exist on type 'Window & typeof globalThis'.ts(2339) How do I tell typescript it does exist?

import React, { useRef } from "react";

function Map() {
    const mapRef = useRef<HTMLDivElement>(null);
    const google = window.google;
//                          ^ Error: Property 'google' does not exist on type 'Window & typeof globalThis'
    const myLatlng = new google.maps.LatLng(-34.397, 150.644);
    const mapOptions = {
    zoom: 8,
    center: myLatlng,
    };
    const map = new google.maps.Map(mapRef.current, mapOptions);
  return (<div ref={mapRef}></div>);
}

export { Map };

Answer 1

google recommends to have ts.config.json with this setting.

https://developers.google.com/maps/documentation/javascript/using-typescript

{
  "compilerOptions": {
    "types": ["google.maps"]
  }
}

in the root of your project you have to create ts.config.json and add that property single property. this is how you create ts.config.json:

   npx tsc --init