No overload matches this call with styled components (index.d.ts(2187, 9))

Question

I am trying to create Input component using styled components that takes props. When I try the prop called onChange get the error No overload matches this call. I think my types aren't correct for something but after googling hours upon hours I have still not come to an answer. What am I missing?

interface Input {
  onChange?: (x? : string ) => void,
  disabled?: boolean,
  readonly?: boolean,
  width?: CSSUnit,
  heightlightColor?: string,
  bgColor?: string,
  type?: string,
  placeholder?: string,
  isFocus?: boolean,
  fontSize?: CSSUnit,
  highlightColor?: string,
  padding? : CSSUnit,
  height? : CSSUnit
}

const InputWrapperDefault = styled.input<Input>`
  background-color: inherit;
  width: 100%;
  height: 100%;
  outline: none;
  border-width: 0px;
  color: inherit;
  font-size: ${(props) => props.fontSize || '16px' };
  padding: ${(props => props.padding ? props.padding : '16px')};
  box-sizing: border-box;
`

const Input: React.FC<Input> = (props) => {
  const [isFocus, setFocus] = useState(false);
  const {
    highlightColor,
    onChange = ()=>{},
    type = 'text',
    width,
    bgColor,
    ...restProps
  } = props;
  console.log(isFocus);
  return (
        <InputWrapperDefault
          autoCapitalize="sentences"
          autoComplete="on"
          autoCorrect="on"
          dir="auto"
          maxLength={50}
          name='name'
          onChange={(e:ChangeEvent<HTMLInputElement>):void => { onChange(e.target.value)} }
          onClick={()=> setFocus(true)}
          spellCheck="true"
          type={type}
          {...restProps}
        />
  )
}

(JSX attribute) onChange?: (React.ChangeEventHandler<HTMLInputElement> & ((x?: string | undefined) => void)) | undefined

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & Input, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement> & ((x?: string | undefined) => void)'.
      Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(x?: string | undefined) => void'.
        Types of parameters 'e' and 'x' are incompatible.
          Type 'string | undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
            Type 'undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"input", any, Input, never, "input", "input">): ReactElement<StyledComponentPropsWithAs<"input", any, Input, never, "input", "input">, string | JSXElementConstructor<...>>', gave the following error.
    Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement> & ((x?: string | undefined) => void)'.
      Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(x?: string | undefined) => void'.ts(2769)
index.d.ts(2187, 9): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & Input, never> & Partial<...>, "theme"> & { ...; } & { ...; }'
index.d.ts(2187, 9): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & Input, never> & Partial<...>, "theme"> & { ...; } & { ...; }'

Updated on onChange?: (x? : string ) => void,

Answer 1

The crux of the error is this: Type 'undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'. That is to say, in your Input type you specify that the argument to onChange might be undefined (because of the optional ?) or string instead of a ChangeEvent<HTMLInputElement>, but you then try to assign a handler to onChange that only accepts a ChangeEvent<HTMLInputElement> instead of any of the three possibilities.

If I'm understanding what you're accomplishing with the string vs. event type and the unwrapping to e.target.value, you ought to get the desired result by changing the two onChange lines to this:

onChange?: (x: string | ChangeEvent<HTMLInputElement>) => void,

and this:

onChange={(e: string | ChangeEvent<HTMLInputElement>):void => { onChange((typeof e === 'string') ? e : e.target.value)} }

Here I've done away with the undefined branch entirely, assuming that the method won't be called without any argument. I've then arranged for the handler to accept a string by passing it through unchanged.