useAnimatedGestureHandler的onStart方法context参数正确泛型类型怎么定义？

核心思路 #

不需要使用Record<string, unknown>这类接近any的宽松类型，完全可以通过自定义上下文接口实现严格类型校验。useAnimatedGestureHandler的泛型参数是固定顺序的：

• 第一个泛型位：传入当前绑定的手势事件载荷类型，例如Pan手势对应GestureEvent<PanGestureHandlerEventPayload>
• 第二个泛型位：传入你自定义的上下文类型，替代默认的{}空对象类型

标准实现步骤 #

• 第一步：根据手势逻辑实际需要存储的字段，明确定义上下文专属接口，列全所有会存到ctx里的字段和对应类型
  比如滑块逻辑需要记录拖动起始时的X轴偏移值，就可以写：

  interface SliderGestureContext {
    offsetX: number;
  }
  

• 第二步：按泛型顺序传入自定义类型，让TS能正确推断回调里ctx的类型
  完整可运行的示例代码：

  import {
    GestureEvent,
    PanGestureHandlerEventPayload,
    useAnimatedGestureHandler,
  } from 'react-native-reanimated';
  
  // 自定义上下文类型，明确所有存储字段
  interface SliderGestureContext {
    offsetX: number;
  }
  
  const translateX = useSharedValue(0);
  
  const onGestureEvent = useAnimatedGestureHandler<
    GestureEvent<PanGestureHandlerEventPayload>,
    SliderGestureContext
  >({
    onStart: (_, ctx) => {
      // TS会自动识别ctx包含offsetX字段，类型为number，无类型报错
      ctx.offsetX = translateX.value;
    },
    onActive: (event, ctx) => {
      // 后续所有回调中的ctx都会自动继承定义好的类型
      translateX.value = ctx.offsetX + event.translationX;
    },
    onEnd: () => {
      // 补全业务逻辑即可
    },
  });
  

常见注意事项 #

• 不要搞混泛型参数的顺序：如果把上下文类型塞到第一个泛型位、把事件类型塞到第二个，会出现类型不匹配的连带报错
• 上下文接口的字段要和实际存储的值类型对齐，比如存SharedValue的数值就写number，存布尔值就写boolean，不要盲目写宽泛类型
• 不推荐使用Record<string, unknown>作为上下文类型：这种写法虽然能快速消掉初始的类型报错，但会丢失字段名和值的校验能力，比如手滑写错字段名时TS不会抛出提示，很容易引入无意义的运行时bug
• 这种写法和Reanimated 2/3版本的类型定义完全兼容，不需要因为版本升级调整写法

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