Property 'rawValue' does not exist on type 'EventTarget & HTMLInputElement' error while using typescript with cleave.js

Question

I am having the above error in onChange event while using cleave with typescript. Ts throws error stating it doesn't have 'rawValue' in event.target. My code is as below:

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;

Error is in: event.target.rawValue of handleChange StyledCleaveInput imported above uses 'cleave.js' Input and hence we can have event.target.rawValue inside the event object available in onChange of input. Installed @@types/cleave also but error is still there.

Thanks in advance for help

Answer 1

after researching a lot, I got the answer as implementing my own ChangeEvent like this:

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

and then using it like this:

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