React Native结合TS为react-hook-form封装通用Input组件的相关疑问

你可以通过泛型+类型交叉的方式实现类型安全，同时继承TextInput所有原生属性，完全消除代码里的any类型：

1. 先引入需要的官方类型

import { Control, FieldPath, FieldValues, useController } from 'react-hook-form';
import { TextInput, TextInputProps } from 'react-native';
import { FC } from 'react';

2. 定义泛型Props

// 泛型T适配不同表单的类型定义，默认兼容通用表单场景
type InputTextProps<T extends FieldValues = FieldValues> = TextInputProps & {
  name: FieldPath<T>;
  control: Control<T>;
  // 可选：把defaultValue提出来支持自定义
  defaultValue?: string;
}

3. 完整组件代码

const InputText = <T extends FieldValues = FieldValues>({
  name,
  control,
  defaultValue = '',
  ...props
}: InputTextProps<T>) => {
  const { field } = useController({
    name,
    defaultValue,
    control
  })
  return (
    <TextInput 
      value={field.value}
      onChangeText={field.onChange}
      {...props}
    />
  )
}

使用时可以绑定表单类型获得更严格的校验和自动提示：

// 先定义你的表单类型
type LoginForm = {
  account: string;
  password: string;
}

const { control } = useForm<LoginForm>();

// 这里name只能传account/password，传错会直接触发TS报错
<InputText<LoginForm> name="account" control={control} placeholder="请输入账号" />
<InputText<LoginForm> name="password" control={control} placeholder="请输入密码" secureTextEntry />

React Native配合TypeScript长期使用利大于弊，初期确实会存在需要编写额外类型代码的情况，尤其是搭配react-navigation、react-hook-form这类强类型依赖库的时候，会增加前期的开发工作量，但收益非常明显：

• 提前规避80%以上的低级错误，比如传错参数、写错字段名、属性值类型不匹配等问题，不需要等到运行阶段才能发现
• 编辑器自动补全非常顺畅，路由名、表单字段、组件属性都有智能提示，熟练后开发效率远高于纯JS
• 后期维护成本极低，时隔很久再改代码，只需要看类型定义就能理清数据结构和传参规则，不需要翻历史逻辑梳理代码
  针对react-navigation这类需要全局定义类型的库，官方已经提供了成熟的类型模板，只需要定义一次全局路由类型，之后所有路由跳转、参数传递都会自动继承类型校验，不需要重复编写类型代码。

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