将typescript与cleave.js一起使用时，类型为“EventTarget&HTMLInputElement”时出现错误，属性“”cleave.js“”不存在

Question

在使用拆分和typescript时，我在onChange事件中出现了上述错误。Ts抛出错误，声明它在event.target中没有'rawValue‘。我的代码如下：

import React, { useCallback, useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { StyledCleaveInput } from './style';
import { getCleaveOptions } from './helper';

interface Props {
  error?: string;
  id?: string;
  value?: string;
  onChange?: (arg: any) => any;
  disabled?: boolean;
  placeholder?: string;
  deviceType?: string;
  additional?: object;
}

const FormattedNumberInput: React.FC<Props> = (props): JSX.Element => {
  const { id, placeholder, onChange, error, disabled, deviceType, value } = props;

  type cleaveState = {
    setRawValue: (arg: any) => any
  };

  const [cleave, setCleave] = useState<cleaveState | null>(null);

  const options = useMemo(() => getCleaveOptions(props), []);

  const handleChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );

  useEffect(() => {
    if (cleave && value) cleave.setRawValue(value);
  }, [cleave, value]);

  return (
    <StyledCleaveInput
      data-id={id}
      placeholder={placeholder}
      isError={error}
      disabled={disabled}
      deviceType={deviceType}
      onChange={handleChange}
      options={options}
      onInit={setCleave}
    />
  );
};

FormattedNumberInput.propTypes = {
  error: PropTypes.string,
  id: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  placeholder: PropTypes.string,
  deviceType: PropTypes.string,
  additional: PropTypes.object,
};

export default FormattedNumberInput;

错误在:上面导入的handleChange StyledCleaveInput的event.target.rawValue使用'cleave.js‘输入，因此我们可以在输入的onChange中使用事件对象内的event.target.rawValue。还安装了@@types/cleave，但错误仍然存在。

提前感谢您的帮助

Answer 1

经过大量的研究，我得到了如下的答案:实现我自己的ChangeEvent：

interface ChangeEvent<T> extends React.ChangeEvent<T> {
  target: { rawValue: string } & EventTarget & T;
}

然后像这样使用它：

const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      if(onChange){
        onChange(event.target.rawValue);
      }
    },
    [onChange]
  );

Answer 2

看起来您正在使用Cleave.js库。在这种情况下，对于handleChange事件处理程序方法，不应使用HTMLInputElement作为ChangeEvent的类型参数。相反，您可能需要使用Cleave (或任何等效的，因为我不太熟悉这个库)作为类型参数。

const handleChange = useCallback(
  (event: React.ChangeEvent<Cleave>) => {
    if(onChange){
      onChange(event.target.rawValue);
    }
  },
  [onChange]
);