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

我不知道，下面的要求搜索什么。我使用下面的类型作为react道具

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

现在，我想让typescript知道，如果指定了

minValue

，那么也应该需要

minValueValidationMessage

如果指定了

minValueValidationMessage

，则还应指定

minValue

---

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

您可以尝试下面的一种

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

使用道具时，您可以指定

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

---

如果

{value:number，validationMessage:string}

重复，则可以将其提取为单独的类型。

我喜欢Vuetify的文本字段验证

它们在文本字段上声明

规则

属性，如果规则被传递，则返回

true

，否则返回错误字符串

// T will be type of value you want to validate, string for textfield for example
type ValidationRule<T> = (value: T) => true | string;
 
interface ComponentProps {
  message: string;
  rules: ValidationRule<string>[]
}

//T将是要验证的值的类型，例如，text字段的字符串
类型ValidationRule=（值：T）=>true |字符串；
接口组件{
消息：字符串；
规则：ValidationRule[]
}

现在您可以像这样描述父组件中的验证规则

<Component rules={[
  (value) => !!value || 'This field is required!',
  (value) => value.length < 10 || 'Length should be lesser than 10'
]}>

！！值| |“此字段为必填字段！”，
（value）=>value.length<10 | |“长度应小于10”
]}>

---

并在组件内部循环验证规则，以验证并显示验证消息

也许您正在关注这一点：（可能难以扩展）谢谢Nick。它的缩放部分就是问题所在。我说过5条验证消息和验证值，创建一个组合成为一个有趣的模式。谢谢这解决了与验证相关的另一类问题。但是，我问的问题是关于打字脚本类型的，而另一个答案恰恰解决了这个问题