打字稿所需要的属性，如果其他的定义（requiredIf）

Posted 2021-04-29

是否有可能定义interface或TS一type这将确保，如果道具A定义道具B必须还（如果A没有定义/套，B绝不能任）。比如我有不便。喜欢：

export interface IExample {
  a: string;
  b: () => void;
  c: boolean;
}

然后，如果我有一些对象，它实现IExample我想为TS，让我既可以采用具有只是道具c或两者a，b和c并抛出编译错误，如果我刚才a和c或b和c。

更好的例子是使用这部分作出反应像this SO question甚至更好，我要实现相同的功能像：this ReactPropType library。

我试图通过区分工会要做到这一点，但我不能让它开始工作时，我有几个这样的道具（即requriedIf）的它变得太复杂，但也许我只是做这一切是错误的。这里是例如我的代码：

export interface INetworkRequestStatusMessageDefaultProps {
  testID?: string;
  networkRequestStatus: NetworkRequestStatus;
}
export interface INetworkRequestStatusMessageLoadingProps {
  loadingMessageTranslationKey: string;
  firstTimeUserMessageTranslationKey: string;
  firstTimeUserCallOnActionTranslationKey: string;
  onPressFirstTimeUser: () => void;
  dataLoaded: boolean;
  errorMessageTranslationKey: never;
  errorCallOnActionTranslationKey: never;
  networkErrorMessageTranslationKey: never;
  onPressError: () => never;
  deviceConnectedToNetwork: never;
}
export interface INetworkRequestStatusMessageFisrtTimeUserProps {
  firstTimeUserMessageTranslationKey: string;
  firstTimeUserCallOnActionTranslationKey: string;
  onPressFirstTimeUser: () => void;
  dataLoaded: boolean;
  loadingMessageTranslationKey: never;  
  errorMessageTranslationKey: never;
  errorCallOnActionTranslationKey: never;
  networkErrorMessageTranslationKey: never;
  onPressError: () => never;
  deviceConnectedToNetwork: never;
}
export interface INetworkRequestStatusMessageErrorProps {
  errorMessageTranslationKey: string;
  errorCallOnActionTranslationKey: string;
  networkErrorMessageTranslationKey: string;
  onPressError: () => void;
  deviceConnectedToNetwork: boolean;
  firstTimeUserMessageTranslationKey: undefined;
  firstTimeUserCallOnActionTranslationKey: never;
  onPressFirstTimeUser: () => never;
  dataLoaded: never;
  loadingMessageTranslationKey: never;
}

export type NetworkRequestStatusMessageProps =
  | (INetworkRequestStatusMessageDefaultProps &
      (
        | INetworkRequestStatusMessageLoadingProps
        | INetworkRequestStatusMessageFisrtTimeUserProps
        | INetworkRequestStatusMessageErrorProps))
  | (INetworkRequestStatusMessageDefaultProps &
      INetworkRequestStatusMessageErrorProps &
      INetworkRequestStatusMessageFisrtTimeUserProps &
      INetworkRequestStatusMessageLoadingProps);

这里是我如何使用它：

 <NetworkRequestStatusMessage
            networkRequestStatus={this.props.networkRequestStatus}
            deviceConnectedToNetwork={this.props.deviceConnectedToNetwork}
            dataLoaded={this.props.savedWorkoutsLoaded}
            errorCallOnActionTranslationKey={"savedWorkouts.retry"}
            errorMessageTranslationKey={"savedWorkouts.error"}
            firstTimeUserCallOnActionTranslationKey={"savedWorkouts.callOnActionGoToCW"}
            firstTimeUserMessageTranslationKey={"savedWorkouts.firstTimeUser"}
            loadingMessageTranslationKey={"savedWorkouts.loading"}
            networkErrorMessageTranslationKey={"savedWorkouts.networkError"}
            onPressError={this.props.load}
            onPressFirstTimeUser={() => {
              tron.log("Clicked on go to CW");
            }}
            testID={"SAVED_WORKOUTS"}
          />

但是，TS在我大呼小叫说：

types of property 'firstTimeUserMessageTranslationKey' are incompatible.
        Type 'string' is not assignable to type 'undefined'

后面我的代码的整个想法就是要确保，如果使用NetworkRequestStatusMessage必须指定所有的道具，或者例如所有这些道具（或者他们没有）开发商：为errorMessageTranslationKey errorCallOnActionTranslationKey，networkErrorMessageTranslationKey，onPressError，INetworkRequestStatusMessageFisrtTimeUserProps和类似

答案

您应该使用一个工会为：

type Example = {
  a: string;
  b: () => void;
  c: boolean;
} | {
  c: boolean;
}