TypeScript报错：类型Element缺少ButtonProps的className、content属性怎么解决？

错误原因 #

你的Button组件类型声明存在两处错误：

• 入参未标注类型：你把本应该标注给入参的ButtonProps类型写在了函数返回值的位置，导致组件入参缺少类型校验
• 返回值类型错误：React函数组件的返回值是JSX元素（类型为JSX.Element），而非入参的ButtonProps类型，TS校验时发现实际返回的button元素不满足ButtonProps要求的className、content属性，因此抛出对应错误。

修复方案 #

提供两种常用修复写法：

写法1：手动标注入参和返回值类型 #

interface ButtonProps {
  className: string;
  content: string;
}

// 入参标注为ButtonProps，返回值标注为JSX.Element，也可省略返回值类型让TS自动推导
const Button = ({ className, content }: ButtonProps): JSX.Element => {
  return <button className={className}>{content}</button>;
};

export default Button;

写法2：使用React.FC泛型声明（更推荐，统一React组件写法规范） #

import React from 'react';

interface ButtonProps {
  className: string;
  content: string;
}

// 泛型传入入参类型，返回值、children等通用属性类型会自动处理
const Button: React.FC<ButtonProps> = ({ className, content }) => {
  return <button className={className}>{content}</button>;
};

export default Button;

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