React+TypeScript中如何将Rating组件的onClick属性设为可选？

我用TypeScript编写了一个简单的React评分组件，代码如下：

Rating.js

export type RatingType = {
  rating: number,
  onClick: (x: number) => void
  style?: React.CSSProperties,
  prod?: any
}

const Rating: React.FC <RatingType> = ({ rating, onClick, style }) => {
  return (
    <>
      //do something here
    </>
  );
};

export default Rating;

我希望在另一个组件中不传入onClick函数来使用这个评分组件，代码如下：

import Rating from "./Rating";
function Demo() {
  return (
    //logic goes here
    <Rating rating={item.ratings}  />
  )
}

export default Demo

但运行时报错：

Property 'onClick' is missing in type '{ rating: any; }' but required in type 'RatingType'.

请问如何在定义RatingType类型时将onClick函数设为可选？

只需要在RatingType中给onClick属性添加?标记，将其声明为可选属性即可：

export type RatingType = {
  rating: number,
  onClick?: (x: number) => void, // 添加?标记将属性设为可选
  style?: React.CSSProperties,
  prod?: any
}

修改后，使用<Rating rating={item.ratings} />时就不会再触发类型错误。另外，建议在组件内部调用onClick时使用可选链语法，避免因onClick未传入导致运行时错误：

// 组件内部调用示例
const handleStarClick = (x: number) => {
  onClick?.(x); // 可选链调用，onClick不存在时不会执行
};

内容的提问来源于stack exchange，提问作者The Dead Man