React+TypeScript自定义Input组件onChange类型冲突问题求助

不用Omit，直接通过交叉类型覆盖原生Input的onChange类型即可，代码极简且符合TypeScript类型规则：

import React, { InputHTMLAttributes } from 'react';

// 交叉类型中，自定义onChange会覆盖原生属性的同名类型
type CustomInputProps = InputHTMLAttributes<HTMLInputElement> & {
  onChange?: (value: string) => void;
};

const CustomInput: React.FC<CustomInputProps> = ({ onChange, ...restProps }) => {
  const handleNativeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 把输入值传递给自定义的onChange
    onChange?.(e.target.value);
  };

  return <input {...restProps} onChange={handleNativeChange} />;
};

// 使用示例：直接传入setState即可，无类型错误
const Demo = () => {
  const [inputValue, setInputValue] = React.useState('');
  return <CustomInput value={inputValue} onChange={setInputValue} />;
};

原理说明 #

TypeScript的交叉类型中，后定义的属性会覆盖先定义的同名属性，因此我们不需要用Omit移除原生的onChange，直接在交叉类型里声明自定义的onChange类型，就能替换掉原生的ChangeEvent回调类型，完美匹配setState的参数要求。

如果需要同时兼容原生ChangeEvent和自定义值回调，可以用联合类型扩展：

type CustomInputProps = InputHTMLAttributes<HTMLInputElement> & {
  onChange?: ((value: string) => void) | ((e: React.ChangeEvent<HTMLInputElement>) => void);
};

const CustomInput: React.FC<CustomInputProps> = ({ onChange, ...restProps }) => {
  const handleNativeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!onChange) return;
    // 简单判断回调接受的参数类型，适配两种场景
    onChange.length === 1 ? onChange(e.target.value) : onChange(e);
  };

  return <input {...restProps} onChange={handleNativeChange} />;
};

内容的提问来源于stack exchange，提问作者Руслан Тютин