reactjs - 在 Typescript 中，如果设置了另一个可选属性，如何使属性成为必需？

Question

我不确定，要搜索以下要求的内容。我正在使用以下类型的 react Prop 。

interface ComponentProps {
   message : string,
   minValue? : number,
   minValueValidationMessage? :string
}

现在，我想让 typescript 知道，如果指定了 minValue，那么 minValueValidationMessage 也应该是必需的。

如果指定了minValueValidationMessage，则还应指定minValue。

我有很多类似的这样的组合，并且可以以任何排列组合发生。

Answer 1

你可以试试下面这个。

interface ComponentProps {
   message : string,
   min? : {value : number, validationMessage : string},
   max? : {value : number, validationMessage : string},
}

使用 Prop 时可以指定

<Component 
    message={"Hello World"} 
    min={{value:10,vaidationMessage:"Value should be more than 10"}}
/>

如果 {value : number, validationMessage : string} 重复则可以提取到单独的类型。