React TS共享样式的组件道具

Question

让打字稿了解共享组件中的道具的正确方法是什么：

import styled from 'styled-components'
import React, { forwardRef } from 'react'

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

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

第一期：

  

属性“ err”在类型上不存在   '挑，   HTMLInputElement>，“表单” | “样式” | “标题” | “模式” | “钥匙” |   “接受” | “ alt” | “自动完成” | ... 276更多... |   “ onTransitionEndCapture”>＆{...; }和ThemeProps <...>'

第二个问题： 主题是任何类型，但在提供者中具有接口：

第三期：

Answer 1

您可以为样式组件道具创建类型：

type StyledInputProps = {
  err?: string
}

const StyledInput = styled.input<StyledInputProps>`
  // your styles...
`;

对于主题，您必须创建自己的主题类型。示例：

type ThemeType = {
  colors: {
    primary: string,
  }
};

const theme: ThemeType = {
  colors: {
    primary: '#F47829',
  }
};

const App = () => (
  <ThemeProvider theme={theme}>
    // ...
  </ThemeProvider>
);

文档：https://www.styled-components.com/docs/api#typescript。

要将错误传递到“输入”组件中，您必须为该组件再创建一种类型（或者，如果所有道具都相同，则可以使用相同类型）：

type InputProps = {
  err?: string
};

const Input: React.FC<InputProps> = forwardRef(({ ...rest }, ref) => {
    return <StyledInput {...rest} ref={ref} />
});

或使用type作为forwardRef的第二种类型参数：

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