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

Question

我正在尝试使用带有道具的样式组件创建输入组件。 当我尝试名为 onChange 的道具时，出现错误 No 重载与此调用匹配。 我认为我的类型不正确，但经过数小时的谷歌搜索后，我仍然没有得到答案。 我错过了什么？

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 （因为可选的? ）或string而不是ChangeEvent<HTMLInputElement> ，但您随后尝试为onChange分配一个仅接受ChangeEvent<HTMLInputElement>而不是三种可能性中的任何一种。

如果我了解您正在使用字符串与事件类型以及展开为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 。