Styled-Components+TypeScript报错：Button无构造或调用签名(TS2604)

问题根源 #

你的IStyledButtonProps仅定义了自定义的secondary属性，但Styled Components生成的Button组件需要兼容原生HTML按钮的所有props（比如onClick、style），缺失这些属性的类型定义会导致TypeScript无法识别该组件为合法的JSX元素。

解决方案 #

1. 扩展原生按钮属性接口

修改类型定义，让IStyledButtonProps继承React提供的ButtonHTMLAttributes，这样就能包含所有原生按钮的属性类型：

import type { ButtonHTMLAttributes } from 'react';

export interface IStyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  readonly secondary?: boolean;
}

2. 修正Styled组件的样式语法（可选但推荐）

你的模板字符串中存在多余的分号（比如#1d9284;），这会导致样式解析错误，建议调整：

export const Button = styled.button<IStyledButtonProps>`
  ${(props) => `
    background: ${props.secondary ? 'white' : '#1d9284'};
    color: ${props.secondary ? '#1d9284' : 'white'};
  `}
`;

3. 确认组件导入方式正确

确保使用组件时的导入语句与导出方式匹配：

• 如果是命名导出（如你的代码中export const Button），导入时需用：

  import { Button } from './你的组件文件路径';
  

验证 #

修改后重新编译，TypeScript的2604错误应该会消失，同时Button组件可以正常接收onClick、style等原生属性。

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