reactjs - TypeScript React Google Maps: 'google' eksisterer ikke

Jeg har lastet inn Google Maps Javascript API i public/index.html, og i utviklerverktøyets konsoll kan jeg logge window.google.maps helt fint.

Men TypeScript vet ikke at det er der, og jeg får denne feilen Property 'google' does not exist on type 'Window & typeof globalThis'.ts(2339) Hvordan sier jeg til TypeScript at det eksisterer?

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 };

Svar #1

Google anbefaler å ha ts.config.json med denne innstillingen.

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

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

I roten av prosjektet ditt må du opprette ts.config.json og legge til den egenskapen. Slik oppretter du ts.config.json:

   npx tsc --init

Svar #2

Jeg tenkte på dette litt mer. Hvis du ikke har installert Google Map-typene fra DefinitelyTyped, foreslår jeg å gjøre det:

npm install --save @types/googlemaps. (Eller --save-dev hvis du bare vil ha dem for din egen utvikling.)

Relaterte artikler