没有重载将此调用与样式化组件匹配 (index.d.ts(2187, 9))

Question

我正在尝试使用带有道具的样式组件创建输入组件。当我尝试名为 onChange 的道具时，得到错误 No overload matches this call。 我认为我的类型在某些方面不正确，但是经过数小时的谷歌搜索后，我仍然没有得到答案。 我错过了什么？

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"> & { ...; } & { ...; }'

更新于onChange?: (x? : string ) => void,

Answer 1

错误的症结在于：Type 'undefined' is not assignable to type 'ChangeEvent<HTMLInputElement>'. 也就是说，在您的Input 类型中，您指定onChange 的参数可能是undefined（因为可选的?）或@ 987654326@ 而不是 ChangeEvent<HTMLInputElement>，但您随后尝试将处理程序分配给仅接受 ChangeEvent<HTMLInputElement> 而不是三种可能性中的任何一种的 onChange。

如果我了解您使用字符串与事件类型以及解包到 e.target.value 所完成的工作，您应该通过将两个 onChange 行更改为这样来获得所需的结果：

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

还有这个：

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

这里我完全取消了undefined 分支，假设在没有任何参数的情况下不会调用该方法。然后，我安排处理程序通过不变地传递string 来接受它。