Question

我正在努力了解如何验证两个道具是否存在。

换句话说，它们都是可选的，但是如果一个存在，则另一个也必须。

我不太了解条件类型在这种情况下如何工作，在所有示例中，我都看到条件是该类是否扩展了另一个类，那么在这里如何工作？

interface DateInputProps {
  onDateChange: (date: Date) => void;
  date: any;
}

interface DateInputPropsNull {}

type SelectiveProps<T> = T extends _what?_
  ? DateInputPropsNull
  : DateInputProps;

class DateInput extends React.Component<
  SelectiveProps<_what?_>,
  DateInputState
> {

    render() {
        const {
          date = this.state.date,
          onDateChange = (date: any) => this.setState({ date })
        } = this.props;
        ...
    }

}

然后我希望能够做到：

<DateInput /> //No type error
<DateInput date="2011-01-05" onDateChange={(date)=> console.log(date)}/> //No type error
<DateInput date="2011-01-05" /> //Error - onDateChange is required

Answer 1

您可以这样做

interface DateInputProps {
  onDateChange: (date: Date) => void;
  date: string;
}

interface DateInputPropsNull {
  onDateChange?: undefined,
  date?: undefined
}

type SelectiveProps = DateInputProps | DateInputPropsNull

class DateInput extends React.Component<SelectiveProps>

因此，如果您传递值之一，则将得到类型错误。此解决方案的唯一问题是，当您将undefined传递给date或onDateChange时，它不会给您错误。

<DateInput /> //No type error
<DateInput date="2011-01-05" onDateChange={(date)=> console.log(date)}/> //No type error
<DateInput date="2011-01-05" /> //Error - onDateChange is required
<DateInput date={undefined} onDateChange={undefined} /> // No type error

Answer 2

我想你可以这样：

interface IDateInputProps {
  date?: any;
  onDateChange()?: void;
}

export class DateInput extends React.Component<IDateInputProps, DateInputState> {
  render() {
    const { date, onDateChange } = this.props;

    if ((!date && onDateChange) || (date && !onDateChange)) {
      throw new Error('"date" and "onDateChange" props must occur together");
    }

    ...
  }
}

我还没有测试过，但是我认为这可以满足您的要求。

使用Typescript

2 个答案: