Google Maps LatLng{} 的打字稿类型问题

Question

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

我创建了一个 type GoogleGeocodingResponse 接受地理编码 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 中有我可以使用的类型吗？还有别的吗？

Answer 1

您不应将类型 Number 与 number 混合使用。

Type Number is not assignable to type number. number is a primitive, but Number is a wrapper object. Prefer using number when possible.

{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 returns 类型 number（原始/小写）。

阅读更多 TypeScript Do's and Don'ts。

❌ Don’t ever use the types Number, String, Boolean, Symbol, or Object These types refer to non-primitive boxed objects that are almost never used appropriately in JavaScript code.

✅ Do use the types number, string, boolean, and symbol.

Google Maps LatLng{} 的打字稿类型问题

Typescript types problem with Google Maps LatLng{}

javascript

typescript

google-maps

typescript-types