react-leaflet结合TypeScript时GeoJSON style回调feature类型问题

根因说明 #

react-leaflet的GeoJSON组件style回调类型继承自Leaflet底层的StyleFunction定义，其入参feature本身就是Feature<Geometry, T> | undefined的联合类型——手动标注类型报错，核心原因是漏写了undefined的可空分支，且手动拼接的类型和框架内置的泛型参数不匹配。
框架本身没有单独导出这个回调的类型，所以直接在GeoJSON命名空间下找不着对应定义，VSCode无法跳转是因为类型是通过组件Props泛型嵌套推导出来的，没有显式挂载到命名空间下。

最简实现 #

直接从leaflet核心包导入内置的StyleFunction类型即可，和react-leaflet内部用的类型完全一致，不需要自己手写冗长的参数类型：

import { useCallback } from 'react';
import { GeoJSON } from 'react-leaflet';
import type { PathOptions, StyleFunction } from 'leaflet';

// 自定义GeoJSON properties的业务类型
type CustomGeoProps = {
  osm_id: string;
  // 其他业务自定义字段
};

const styleFeature = useCallback<StyleFunction<CustomGeoProps>>((feat) => {
  // TS自动推导feat为 Feature<Geometry, CustomGeoProps> | undefined
  if (!feat?.properties) {
    return {} satisfies PathOptions;
  }
  // 直接取osm_id有完整类型提示，不会报字段不存在
  const osmId = feat.properties.osm_id;
  return {
    fillColor: '#0a0',
    color: `#f0${Math.floor(Math.random() * 10)}`
  } satisfies PathOptions;
}, []);

不直接依赖leaflet类型导入的写法 #

如果不想单独引入leaflet的类型，也可以从react-leaflet的组件Props中反向提取类型，效果完全一致：

import type { ComponentProps } from 'react';
import { GeoJSON } from 'react-leaflet';
import type { PathOptions } from 'leaflet';

type GeoJsonProps = ComponentProps<typeof GeoJSON>;
type ExtractedStyleFunction = Exclude<NonNullable<GeoJsonProps['style']>, PathOptions>;

// 用法和上面的StyleFunction完全相同
const styleFeature = useCallback<ExtractedStyleFunction<CustomGeoProps>>((feat) => {
  // 业务逻辑
}, []);

现有临时方案的问题 #

当前手动标注GeoJSON.Feature<GeoJSON.Geometry, any> | undefined的写法运行时不会出问题，但可维护性差：如果后续框架版本调整了回调参数类型（比如新增第二个入参），手写的类型不会同步更新，容易出现类型定义和实际运行逻辑不匹配的隐患，直接复用框架内置类型即可规避这个问题。

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