道具类型:验证接口数组作为react中的道具

Question

我在react组件上遇到了一些问题，我需要一些帮助来找到解决方案。。。

我想在我的组件上使用propTypes，以便进行运行时验证。我已经为我想要使用的道具实现了接口。一些道具是接口数组。以下是我目前所拥有的：

类型定义：

export type Point = {
/** x value */
readonly x: number;
/** y value */
readonly y: number;
}
/** Contains information relative to a line plot */
export interface LineData {
/** name of the line. Will be used in legend */
readonly legend: string;
/** Color of the line. If unspecified, a color will be chosen automatically */
color?: string;
/** width of the line in pixel. If not specified, a default value is provided */
strokeWidth?: number;
/** Contains all points associated with this line */
readonly data: Array<Point>;
}
/** Graph properties */
export interface GraphProps {
/** An array that contains all line definitions */
readonly lineDatas: Array<LineData>;
/** The plot's title. Is set in upper left corner of the plot, outside border */
readonly plotTitle?: string;
/** Plot title's font size */
readonly plotTitleFontSize?: number;
}

道具类型的实现：

Graph.propTypes = {  
lineDatas: PropTypes.arrayOf(PropTypes.shape({
legend : PropTypes.string.isRequired,
color:PropTypes.string,
strokeWidth: PropTypes.number,
data: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number
}))
})),
plotTitle: PropTypes.string,
plotTitleFontSize: PropTypes.number,
};

我得到了这个错误，即使egend是按要求设置的。。。

Property 'legend' is optional in type 'InferProps<{ legend: Requireable<string>; color: Requireable<string>; strokeWidth: Requireable<number>; data: Requireable<InferProps<{ x: Requireable<number>; y: Requireable<...>; }>[]>; }>' but required in type 'LineData'.

谢谢你的帮助！

Answer 1

发布我的评论作为回答。

您应该使用PropTypes.exact()而不是PropTypes.shape()，并向lineData和data字段添加一些缺少的.isRequired调用。

原型代码为：

Graph.propTypes = {  
lineDatas: PropTypes.arrayOf(PropTypes.exact({
legend : PropTypes.string.isRequired,
color:PropTypes.string,
strokeWidth: PropTypes.number,
data: PropTypes.arrayOf(PropTypes.exact({
x: PropTypes.number,
y: PropTypes.number
})).isRequired
})).isRequired,
plotTitle: PropTypes.string,
plotTitleFontSize: PropTypes.number,
};