带有打字稿的样式组件：没有提供道具的错误消息 - 没有与此调用匹配的重载

Question

你能告诉我为什么当我使用样式组件和普通组件时，打字稿的错误消息看起来不同吗？如果我做错了什么还是正常行为？

非常感谢您的帮助！

如果我没有为“按钮”提供道具，我有：

Type '{}' is missing the following properties from type 'ButtonProps': tag, value

但带有样式组件：

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<ButtonProps & { children?: ReactNode; }, never> & Partial<Pick<ButtonProps & { children?: ReactNode; }, never>>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{}' is missing the following properties from type 'Omit<Omit<ButtonProps & { children?: ReactNode; }, never> & Partial<Pick<ButtonProps & { children?: ReactNode; }, never>>, "theme">': tag, value
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<FC<ButtonProps>, DefaultTheme, ButtonProps, never, FC<ButtonProps>, FC<ButtonProps>>): ReactElement<...>', gave the following error.
    Type '{}' is missing the following properties from type 'Omit<Omit<ButtonProps & { children?: ReactNode; }, never> & Partial<Pick<ButtonProps & { children?: ReactNode; }, never>>, "theme">': tag, value

示例代码：

import styled from 'styled-components'

export interface ButtonProps {
  tag: string
  value: string
}

const Button:React.FC<ButtonProps> = ({ tag, value }) => {
  return (
    <StyledButton
      tag={tag}
    >
      {value}
    </StyledButton>
  )
}

const StyledButton = styled.div<Omit<ButtonProps, 'value'>>``

/**
 * --------------------
 */

const AddButton = () => {
  return (
    <>
      <Button
        // tag="a"
        // value="Lorem ipsum dolor"
      />

      <StyledAddButton
        // tag="a"
        // value="Lorem ipsum dolor"
      />
    </>
  )
}

const StyledAddButton = styled(Button)``

export default AddButton