TypeScript组件Props类型报错：缺少必填label属性

你现在碰到的是TypeScript类型检查里的典型矛盾：组件内部明明要用label属性，但要么定义了必填的label却在使用时没传导致报错，要么删掉label的类型定义，组件内部访问它又会报错。咱们一步步拆解解决：

问题根源 #

你的Button组件实际渲染时用到了props.label（按钮文本里的{props.label}），但你在定义Props类型时陷入了两难：

1. 加上label: string，TypeScript会严格要求你使用组件时必须传入这个必填属性，不然就报「缺少必填属性'label'」的错；
2. 去掉label: string，TypeScript又会因为组件内部访问了一个类型里不存在的属性而报错。

解决方案 #

核心思路是：让Props类型完全匹配组件的实际依赖，同时在使用组件时提供所有必填属性。

1. 固定Button组件的Props类型：必须保留label: string，因为组件确实需要这个属性来渲染文本，不能去掉；
2. 使用组件时补充label属性：在<PostButton>和<PostButton2>里添加对应的label值，比如点赞/点踩的文本。

修正后的完整代码 #

// 正确定义Props，包含组件需要的所有属性
function Button(props: { handleClick: () => void; label: string; }) {
  let style = { paddingRight: 100 };
  return (
    <div>
      <button style={style} onClick={() => props.handleClick()}>
        {props.label} {/* 这里用到label，所以Props必须包含它 */}
      </button>
    </div>
  );
}

// 使用组件时传入必填的label属性
<Button handleClick={props.upvote} label="点赞" />
<Button handleClick={props.downvote} label="点踩" />

额外优化（可选） #

如果希望label是可选属性，可以在类型里加?，同时给组件内部的props.label设置默认值，这样使用时不传label也不会报错：

function Button(props: { handleClick: () => void; label?: string; }) {
  let style = { paddingRight: 100 };
  // 设置默认文本，如果没传label就用这个
  const buttonLabel = props.label || "PostButton";
  return (
    <div>
      <button style={style} onClick={() => props.handleClick()}>
        {buttonLabel}
      </button>
    </div>
  );
}

// 这样使用时可以不传label
<Button handleClick={props.upvote} />
<Button handleClick={props.downvote} label="点踩" />

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