React TS获取共享组件的支持

Question

如何让打字稿了解错误类型？

site.example.com

错误是：

  

属性“ err”在类型上不存在   '有孩子的道具，   HTMLInputElement>，“表单” | “样式” | “标题” | “模式” | “钥匙” |   “接受” | “ alt” | “自动完成” | ... 276更多... |   “ onTransitionEndCapture” >>'。ts（2339）

Answer 1

哦，我自己找到了答案，您只需要添加＆InputProps：

type InputProps = {
  err?: boolean
}

export const Input = forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & InputProps>(({ err, ...rest }, ref) => {
  // some use for err here
  return <StyledInput {...rest} ref={ref} />
})


const StyledInput = styled.input<InputProps>`
  box-shadow: inset 0 0 0 1px ${({ err, theme }) => (err ? theme.badColor : theme.primaryColor)};
`

Answer 2

使用InputProps类型作为第二个通用参数：

export const Input = forwardRef<HTMLInputElement, InputProps>(({ err, ...rest }, ref) => {
  return <StyledInput {...rest} ref={ref} />
});