'(e: ChangeEvent <HTMLInputElement>) => void' нельзя назначить типу ((событие: ChangeEvent <HTMLInputElement>) => void)

Question

export interface InputProps {
    type?: string;
    name?: string;
    value?: CommonTypeTuple;
    placeholder?: string;
    label?: string;
    error?: string;
    helpText?: string;
    block?: boolean;
    disabled?: boolean;
    onChange?: ChangeHandler<string>;
    onBlur?: BlurHandler<string | number>;
}

export const Input = ({
    type = "text",
    name = "",
    placeholder,
    error,
    block = false,
    disabled = false,
    onChange = () => {},
    onBlur = () => {},
    value,
    className = "",
    ...rest
}: InputProps & React.InputHTMLAttributes<HTMLInputElement>) => {
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onChange(e.target.value, e.target.name);
    };
    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
        onBlur(e.target.value);
    };
    return (
        <StyledWrapper block={block}>
            <StyledInput
                name={name}
                type={type}
                placeholder={placeholder}
                error={error}
                disabled={disabled}
                onBlur={handleBlur}
                onChange={handleChange}
                value={value}
                className={className}
                aria-label="tm-input"
                {...rest}
            />
        </StyledWrapper>
    );
};

export const StyledInput = styled.input<InputProps>`
...
...

onChange и onBlur сообщает об ошибке

(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) & ChangeHandler<string>'.
Type '(e: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeHandler<string>'.
   Types of parameters 'e' and 'value' are incompatible.
     Type 'string' is not assignable to type 'ChangeEvent<HTMLInputElement>'.ts(2322)
index.d.ts(1977, 9): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | ... 283 more ... | "key"> & { ...; } & InputProps, "type" | ... 288 more ... | "key"> & Partial<...>

Я сбит с толку, потому что я ясно передаю e.target.value, что является строкой, и сообщаемая ошибка предполагает, что она ожидает две функции-обработчика: родная onChange и пользовательская handleChange с разными сигнатурами.

Answer 1

React.InputHTMLAttributes<HTMLInputElement> определяет onChange как (event: ChangeEvent<HTMLInputElement>) => void), а вы определяете onChange как ChangeHandler<string>. Тип, который вы видите в сообщении об ошибке: пересечение из этих двух типов.

Вы можете использовать Omit<T, K>, чтобы удалить перекосы, которые перекрываются:

type ReactInput = React.InputHTMLAttributes<HTMLInputElement>;
type InputArgs = InputProps & Omit<ReactInput, keyof InputProps>

export const Input = ({ ...{}, ...rest }: InputArgs) => { ... }