Búsqueda de sitios web

reactjs - Cómo referenciar un espacio de nombres como tipo en TypeScript


google-map-react carga la biblioteca de Google Maps para mí. Pero la biblioteca cargada no tiene información de tipos.
Simplemente la devuelve como any, como sigue.

function onLoadGoogleMap(): { maps: any } {
    return {
        maps: google.maps
    }
}

Así que instalé @types/googlemaps por mi cuenta. Luego quería asignarle información de tipo así. Pero me da el error de Namespace 'google' no tiene un miembro exportado 'maps'.

function main() {
    // maps is loaded as any
    const { maps } = onLoadGoogleMap()
    // I want type information, BUT this show me a error.
    const googleMaps: {
        maps: google.maps
    } = {
        maps: maps,
    }

    new googleMaps.maps.LatLng(12, 32)
}

Descubrí cómo se ve @types/googlemaps. Es similar a esto.

declare namespace google.maps {
    class LatLng {
        constructor(lat: number, lng: number)
    }
}

¿Cómo puedo establecer la información de tipo del espacio de nombres?
El área de pruebas está aquí.

Patio de recreo

Gracias por su lectura.

Respuesta #1

Encontré la manera de resolver esto.

@types/googlemaps es un conjunto de definiciones, pero namespace en TypeScript es mucho más parecido a un objeto.
Este artículo es un buen recurso para saber qué es un namespace en TypeScript.

Así que podemos hacer referencia a un tipo de espacio de nombres usando la palabra clave typeof de la siguiente manera.

const googleMaps: {
    maps: typeof google.maps
} = {
    maps: maps,
}

Parque infantil