Estoy creando una aplicación TypeScript que toma una dirección del usuario y la muestra en un mapa de Google.
Creé un type GoogleGeocodingResponse que acepta GeoCoding response.data.results como {geometry: {location: {lat: Number; lng: Number}}}
Luego uso Axios para:
.get<GoogleGeocodingResponse>( `https://maps.googleapis.com/maps/api/geocode/json? address=${encodeURI(enteredAddress)}&key=${GOOGLE_API_KEY}` ) La parte que no entiendo es, ¿cómo puedo usar estos datos para crear un LatLng ? he estado usando:
const coordinates = new google.maps.LatLng({ lat: Number(response.data.results[0].geometry.location.lat), lng: Number(response.data.results[0].geometry.location.lng), }) La conversión para escribir Number funciona, pero parece que debería poder obtener los datos directamente de GoogleGeocodingResponse sin tener que enviar primero. ¿Tengo que definir específicamente un tipo? ¿Hay algún tipo en @types/google.maps que pueda usar? ¿Algo más?
No debes mezclar el tipo Number con number .
El
Numberde tipo no se puede asignar alnumberde tipo.numberes un primitivo, peroNumberes un objeto contenedor. Prefiere usarnumbercuando sea posible.
{geometry: {location: {lat: number; lng: number}}} ( N -> n )
lo he probado Funciona. Siempre debe usar los tipos primitivos (minúsculas). Ya no es necesario el yeso. También puede usar as number detrás de su tarea si lo desea. Pero recomiendo cambiar su tipo de Number a number .
Solución A (recomendada):
// Use primitive types. type YourType = { geometry: { location: { lat: number; lng: number } } };Solución B:
const coordinates = new google.maps.LatLng({ lat: response.data.results[0].geometry.location.lat as number, lng: response.data.results[0].geometry.location.lng as number, }) Por cierto. su solución de Number(value) solo funciona porque Number devuelve el tipo de number (primitivo/minúscula).
Lea más sobre lo que se debe y lo que no se debe hacer en TypeScript .
❌ Nunca use los tipos Número, Cadena, Booleano, Símbolo u Objeto. Estos tipos se refieren a objetos encuadrados no primitivos que casi nunca se usan correctamente en el código JavaScript.
✅ Utilice los tipos número, cadena, booleano y símbolo.