React Native TextInput onChange事件中nativeEvent.selection的TypeScript类型报错及使用安全性咨询

嘿，这个问题我之前踩过类似的坑，咱们好好唠唠～

首先说为啥TypeScript会报错：React Native官方的TypeScript类型定义里，NativeSyntheticEvent对应的TextInputChangeEventData类型默认没把selection字段包含进去。这主要是因为不同平台（iOS/Android）的原生事件结构细节有差异，TS为了类型严谨性，没有默认把这个字段加到类型定义里，但实际运行时，TextInput的onChange事件里的nativeEvent确实会携带selection信息——你能console.log出来就说明这一点。

那到底能不能安全使用？答案是完全可以放心用！从React Native 0.60+的各个稳定版本来看，不管是iOS还是Android，TextInput在触发onChange时都会把光标位置、选中范围这些selection数据传递过来，运行时这个字段是稳定存在的，类型报错只是类型定义滞后的小问题，不是运行时的bug。

如果你想解决TS的报错问题，给你两个实用方案：

• 临时类型断言：如果只是个别地方用到，直接把nativeEvent断言成包含selection的类型就行，比如：

const handleTextChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
  // 简单粗暴版，适合临时用
  const selection = (e.nativeEvent as any).selection;
  // 更严谨的自定义类型版
  type ExtendedTextInputEvent = TextInputChangeEventData & {
    selection: { start: number; end: number };
  };
  const typedSelection = (e.nativeEvent as ExtendedTextInputEvent).selection;
};

• 全局扩展类型定义：如果项目里经常用到这个字段，可以创建一个react-native-extensions.d.ts文件，全局扩展类型：

import 'react-native';

declare module 'react-native' {
  interface TextInputChangeEventData {
    selection: { start: number; end: number };
  }
}

这样整个项目里的TS就不会再针对这个字段报错了。

要是你实在担心未来版本可能有变动，也可以加个简单的判断再使用：

if (e.nativeEvent.selection) {
  // 在这里处理selection数据
}

不过从目前的情况来看，完全没必要，这个字段的存在是很稳定的。

内容来源于stack exchange