如何在React+TypeScript+Formik表单中扩展组件类型并避免any

现有数据结构 #

const elements = [
    { type: 'text', value: '' },
    { type: 'text', multiple: true, value: ['', ''] },
    { type: 'select', value: '' },
    { type: 'select', multiple: true, value: ['', ''] },
    { type: 'date-range', value: { from: '', to: '' } },
    { type: 'date-range', multiple: true, value: { from: '', to: '' } },
    { type: 'area', value: { lat: '', long: '', rad: '' } },
];

当前实现问题 #

我用React/TypeScript结合Formik构建了提交上述数据的表单，但现有方案存在以下问题：

• 扩展性不足，新增组件类型需要大量修改判断逻辑
• 部分props不得不使用any类型，丢失类型安全
• 需要同时判断element.type和multiple属性，代码可读性差

核心组件代码 #

const Field = ({
  element,
  onChange
}: {
  element: Element;
  onChange: (value: any) => void;
}) => {
  return (
    <Box>
      {element.type === "text" && (
        <Text
          value={element.value as any}
          isMultiple={element.multiple}
          onChange={onChange}
        />
      )}
      {/* 后续要添加更多类型判断 */}
      {element.type !== "text" && (
        <div key={element.id}>{JSON.stringify(element, null, 4)}</div>
      )}
    </Box>
  );
};

期望目标 #

1. 根据element.type自动渲染对应组件
2. 全程不使用any类型，保证onChange方法的类型安全
3. 未来新增组件类型时可以快速扩展，无需修改核心逻辑

解决方案 #

1. 定义严格的类型系统 #

为不同类型的表单元素定义精确的联合类型，让TypeScript自动推导value和multiple的关联关系：

// 基础元素类型模板
type BaseElement<TType extends string, TValue> = {
  type: TType;
  value: TValue;
  // 可添加id、label等公共属性
};

// 文本框类型
type TextSingleElement = BaseElement<'text', string>;
type TextMultipleElement = BaseElement<'text', string[]> & { multiple: true };
type TextElement = TextSingleElement | TextMultipleElement;

// 选择器类型
type SelectSingleElement = BaseElement<'select', string>;
type SelectMultipleElement = BaseElement<'select', string[]> & { multiple: true };
type SelectElement = SelectSingleElement | SelectMultipleElement;

// 日期范围类型
type DateRangeSingleElement = BaseElement<'date-range', { from: string; to: string }>;
type DateRangeMultipleElement = BaseElement<'date-range', { from: string; to: string }> & { multiple: true };
type DateRangeElement = DateRangeSingleElement | DateRangeMultipleElement;

// 区域选择器类型
type AreaElement = BaseElement<'area', { lat: string; long: string; rad: string }>;

// 所有表单元素的联合类型
type FormElement = TextElement | SelectElement | DateRangeElement | AreaElement;

2. 构建组件映射表 #

创建组件映射对象，将元素类型与对应渲染组件关联，实现按需渲染：

// 文本框组件
const TextComponent = ({ value, multiple, onChange }: {
  value: TextElement['value'];
  multiple?: boolean;
  onChange: (value: TextElement['value']) => void;
}) => {
  return <input 
    type="text" 
    value={Array.isArray(value) ? value.join(',') : value} 
    onChange={(e) => {
      const val = e.target.value;
      onChange(multiple ? val.split(',') : val);
    }} 
  />;
};

// 选择器组件
const SelectComponent = ({ value, multiple, onChange }: {
  value: SelectElement['value'];
  multiple?: boolean;
  onChange: (value: SelectElement['value']) => void;
}) => {
  return <select multiple={multiple} value={value} onChange={(e) => {
    const val = multiple ? Array.from(e.target.selectedOptions).map(opt => opt.value) : e.target.value;
    onChange(val);
  }}>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
  </select>;
};

// 日期范围组件
const DateRangeComponent = ({ value, onChange }: {
  value: DateRangeElement['value'];
  onChange: (value: DateRangeElement['value']) => void;
}) => {
  return (
    <div>
      <input type="date" value={value.from} onChange={(e) => onChange({...value, from: e.target.value})} />
      <span>至</span>
      <input type="date" value={value.to} onChange={(e) => onChange({...value, to: e.target.value})} />
    </div>
  );
};

// 区域选择组件
const AreaComponent = ({ value, onChange }: {
  value: AreaElement['value'];
  onChange: (value: AreaElement['value']) => void;
}) => {
  return (
    <div>
      <input placeholder="纬度" value={value.lat} onChange={(e) => onChange({...value, lat: e.target.value})} />
      <input placeholder="经度" value={value.long} onChange={(e) => onChange({...value, long: e.target.value})} />
      <input placeholder="半径" value={value.rad} onChange={(e) => onChange({...value, rad: e.target.value})} />
    </div>
  );
};

// 组件映射表
const componentMap: Record<FormElement['type'], React.FC<any>> = {
  'text': TextComponent,
  'select': SelectComponent,
  'date-range': DateRangeComponent,
  'area': AreaComponent,
};

3. 重构Field组件 #

利用类型守卫和组件映射表，实现无any、高扩展性的核心组件：

// 类型守卫：判断元素是否包含multiple属性
const hasMultiple = <T extends { multiple?: boolean }>(element: T): element is T & { multiple: true } => {
  return element.multiple === true;
};

const Field = ({ element, onChange }: {
  element: FormElement;
  onChange: (value: FormElement['value']) => void;
}) => {
  const Component = componentMap[element.type];
  if (!Component) return null;

  // TypeScript会自动推导各类型的props类型
  switch (element.type) {
    case 'text':
      return <Component 
        value={element.value} 
        multiple={hasMultiple(element)} 
        onChange={onChange as (value: TextElement['value']) => void} 
      />;
    case 'select':
      return <Component 
        value={element.value} 
        multiple={hasMultiple(element)} 
        onChange={onChange as (value: SelectElement['value']) => void} 
      />;
    case 'date-range':
      return <Component 
        value={element.value} 
        onChange={onChange as (value: DateRangeElement['value']) => void} 
      />;
    case 'area':
      return <Component 
        value={element.value} 
        onChange={onChange as (value: AreaElement['value']) => void} 
      />;
    default:
      // 新增类型时TypeScript会提示此处未处理，保证类型穷尽检查
      const _exhaustiveCheck: never = element;
      return null;
  }
};

4. 结合Formik使用 #

在Formik中通过封装handleChange确保类型匹配：

const Form = () => {
  const initialValues = elements as FormElement[];
  
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      // values类型完全安全，可直接提交到API
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      {formik.values.map((element, index) => (
        <Field 
          key={index} 
          element={element} 
          onChange={(value) => {
            formik.setFieldValue(`[${index}].value`, value);
          }} 
        />
      ))}
      <button type="submit">提交</button>
    </form>
  );
};

扩展新类型的方式 #

新增组件类型只需三步：

1. 定义新的元素类型（如ColorElement）
2. 实现对应的组件（如ColorComponent）
3. 将类型和组件添加到FormElement联合类型和componentMap中

TypeScript会自动在Field组件的switch语句中提示未处理的新类型，确保类型安全。

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