JSX迁移TSX时Google Maps LatLng类型缺失属性报错如何解决

问题背景 #

• 原有JSX站点迁移至TSX过程中，集成Google Maps API的地图模块出现类型报错
• 模块原有功能：调用Google Maps API渲染地图、展示点位信息，支持用户点击元素后触发地图平移放大

报错信息 #

Type '{ lat: () => number; lng: () => number; }' is missing the following properties from type 'LatLng': equals, toJSON, toUrlValue
报错定位在usePlacesAutocomplete配置项里requestOptions的location属性行。

相关原始代码 #

usePlacesAutocomplete配置代码：

const {
  ready,
  value,
  suggestions: { status, data },
  setValue,
  clearSuggestions,
} = usePlacesAutocomplete({
  requestOptions: {
    location: { lat: () => 40.7703, lng: () => -73.9883 }, // 报错行
    radius: 50 * 1000,
  },
}); 

关联的地图平移方法代码：

const panTo = React.useCallback(({ lat, lng }) => {
  mapRef.current.panTo({ lat, lng });
  mapRef.current.setZoom(14);
}, []);

报错原因 #

1. Google Maps的TS类型定义中，LatLng是SDK内置的类实例类型，要求实例必须自带equals、toJSON、toUrlValue等原型方法，代码中传入的是手写普通对象，不满足类型结构要求
2. 代码中错误地将lat、lng写成了返回数值的无参函数，实际上Google Places API的location参数要求lat、lng为数值类型
3. panTo回调的入参没有显式声明类型，TS会隐式判定为any，不符合TSX的类型校验规范

可行修复方案 #

1. 修复location参数类型 #

两种方案选其一即可：

• 方案一：使用LatLngLiteral类型（轻量对象类型，仅要求包含数值类型的lat、lng字段，不需要SDK实例方法），同时去掉lat、lng外层的无参函数包裹，直接传数值：

// 从你项目使用的Google Maps类型依赖包导入该类型，常见导入源是@googlemaps/js-api-loader或者google.maps命名空间
import type { LatLngLiteral } from '@googlemaps/js-api-loader';

const {
  ready,
  value,
  suggestions: { status, data },
  setValue,
  clearSuggestions,
} = usePlacesAutocomplete({
  requestOptions: {
    location: { lat: 40.7703, lng: -73.9883 } as LatLngLiteral,
    radius: 50 * 1000,
  },
}); 

• 方案二：直接通过SDK构造函数创建合法的LatLng实例，完全匹配类型要求：

const {
  ready,
  value,
  suggestions: { status, data },
  setValue,
  clearSuggestions,
} = usePlacesAutocomplete({
  requestOptions: {
    location: new google.maps.LatLng(40.7703, -73.9883),
    radius: 50 * 1000,
  },
}); 

2. 补全panTo方法的类型定义 #

给入参添加明确的类型标注，同时增加可选链判断避免地图实例未初始化时的运行时错误：

const panTo = React.useCallback(({ lat, lng }: LatLngLiteral) => {
  mapRef.current?.panTo({ lat, lng });
  mapRef.current?.setZoom(14);
}, []);

TSX类型定义放置通用规则 #

• 跨组件/跨页面复用的通用类型（比如坐标类型、接口响应类型、通用枚举），统一放在src/types目录下按模块拆分管理
• 单个组件独有的内部类型，直接在对应组件文件顶部声明即可
• 第三方SDK/依赖库已经提供的类型，直接从对应依赖包导入使用，不需要重复手写

内容的提问来源于stack exchange，提问作者Ronny Coste