TypeScript配合styled-components使用报No overload matches this call如何解决？

错误原因 #

你定义的IHeader接口中将selected属性设为了必填项，虽然你给Header组件设置了defaultProps默认值，但TypeScript无法自动将默认值和必填接口属性做关联，因此检测到你调用<Header>时没有传selected就抛出了缺失必填属性的错误。

修复方案 #

方案1（最简便）：将接口中的selected改为可选属性

直接在selected属性后加问号标记为可选，TypeScript就不会强制要求你传这个参数，搭配你已经写好的defaultProps就能正常运行：

interface IHeader {
  selected?: boolean // 加?标记为可选
  children: string
}

方案2：调用组件时显式传入selected属性

如果不想修改接口定义，直接在使用Header的时候传入属性值即可：

<Header selected={false}>children text</Header>

方案3：显式声明组件类型让TypeScript识别defaultProps

如果你需要保持selected为必填属性，又不想每次调用都传，可以显式声明组件的Props类型合并默认值的逻辑：

import type { DefaultProps } from 'styled-components'
import styled, { css } from 'styled-components'

interface IHeader {
  selected: boolean
  children: string
}

const Header = styled.h6<IHeader>`
  color: #fff;
  padding: 5px 0;

  ${(props) =>
    props.selected &&
    css`
      color: #fff;
    `};
` as typeof Header & DefaultProps<IHeader, 'selected'>

Header.defaultProps = {
  selected: false,
}

内容的提问来源于stack exchange，提问作者alfakini