javascript - Google 地图 LatLng{} 的 Typescript 类型问题

我正在创建一个 Typescript 应用程序，它从用户那里获取地址并在 Google 地图上显示。

我创建了一个 type GoogleGeocodingResponse，它接受 GeoCoding response.data.results，形式为 {geometry: {location: {lat: Number; lng: Number}}}

然后我使用 Axios 来：

.get<GoogleGeocodingResponse>(
      `https://maps.googleapis.com/maps/api/geocode/json? 
   address=${encodeURI(enteredAddress)}&key=${GOOGLE_API_KEY}`
 )

我不太明白的是，我如何使用这些数据来创建一个 LatLng？我一直在使用的是：

const coordinates = new google.maps.LatLng({
  lat: Number(response.data.results[0].geometry.location.lat),
  lng: Number(response.data.results[0].geometry.location.lng),
})

转换为类型 Number 是可行的，但似乎我应该能够直接从 GoogleGeocodingResponse 获取数据，而不必先进行转换。我必须特别定义一个类型吗？在 @types/google.maps 中有我可以使用的类型吗？还是别的什么方法？

答案＃1

你不应该将类型 Number 与 number 混合。

类型 Number 不能赋值给类型 number。number 是一个原始类型，而 Number 是一个包装对象。尽可能优先使用 number。

{geometry: {location: {lat: number; lng: number}}} (N -> n)

我已经测试过了。它可以工作。你应该总是使用原始类型（小写）。不再需要类型转换了。如果你愿意，你也可以在赋值后使用 as number。但我建议将你的类型从 Number 改为 number。

解决方案 A（推荐）：

// Use primitive types.
type YourType = { geometry: { location: { lat: number; lng: number } } };

解决方案 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,
})

顺便提一下，你的 Number(value) 解决方案之所以有效，是因为 Number 返回的类型是 number（原始类型/小写）。

阅读更多关于 TypeScript 的注意事项和禁忌。

❌ 永远不要使用 Number、String、Boolean、Symbol 或 Object 类型。这些类型指的是非原始的封装对象，几乎从未在 JavaScript 代码中被正确使用。

✅ 确实使用类型 number、string、boolean 和 symbol。