У меня есть компонент React ExerciseDumb
, в котором есть реквизиты wholeExerciseIsTouchable
и middleIsTouchable
.Если middleIsTouchable равно true , то wholeExerciseIsTouchable должно быть либо опущено, либо false (и наоборот)
Вот мои варианты:
interface IExerciseOwnPropsShared {
id: number;
renderTags?: boolean;
renderValueDifference?: boolean;
onTouch?: () => void;
testID?: string;
}
interface IExerciseOwnPropsMiddleTouchable extends IExerciseOwnPropsShared {
wholeExerciseIsTouchable?: Falsy;
middleIsTouchable?: true;
onMiddleTouch?: () => void;
}
interface IExerciseOwnPropsWholeExerciseTouchable extends IExerciseOwnPropsShared {
wholeExerciseIsTouchable?: true;
middleIsTouchable?: Falsy;
onMiddleTouch?: () => void;
}
interface IExerciseOwnPropsJustLeftSectionTouchable extends IExerciseOwnPropsShared {
wholeExerciseIsTouchable?: Falsy;
middleIsTouchable?: Falsy;
onMiddleTouch?: () => void;
}
type ExerciseOwnProps =
| IExerciseOwnPropsMiddleTouchable
| IExerciseOwnPropsWholeExerciseTouchable
| IExerciseOwnPropsJustLeftSectionTouchable;
Это определение ExerciseDumb
const ExerciseDumb: React.FunctionComponent<ExerciseComponentProps> = (props: ExerciseComponentProps) => { ... }
Также ExerciseDumb
подключен к Redux:
const Exercise = connect<IExerciseFromReduxStateProps, IExerciseFromReduxDispatchProps, ExerciseOwnProps, IReduxState>(
mapStateToProps,
mapDispatchToProps
)(ExerciseDumb);
Проблема в том, что я не могу написать Exercise
компонент без обоих реквизитов wholeExerciseIsTouchable
и middleIsTouchable
, даже если они определены как необязательные, а интерфейс IExerciseOwnPropsJustLeftSectionTouchable
определяет их оба как Falsy
Например, если я пишу такой компонент:
<Exercise id={id} testID={id.toString()} />
Я получаю сообщение об ошибке:
Error:(52, 11) TS2322: Type '{ id: number; testID: string; renderValueDifference: boolean | undefined; renderTags: boolean | undefined; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes<Component<(Pick<ExerciseComponentProps, "wholeExerciseIsTouchable" | "middleIsTouchable" | "id" | "renderTags" | "renderValueDifference" | "testID"> & IExerciseOwnPropsMiddleTouchable) | (Pick<...> & IExerciseOwnPropsWholeExerciseTouchable) | (Pick<...> & IExerciseOwnP...'.
Type '{ id: number; testID: string; renderValueDifference: boolean | undefined; renderTags: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<(Pick<ExerciseComponentProps, "wholeExerciseIsTouchable" | "middleIsTouchable" | "id" | "renderTags" | "renderValueDifference" | "testID"> & IExerciseOwnPropsMiddleTouchable) | (Pick<...> & IExerciseOwnPropsWholeExerciseTouchable) | (Pick<...> & IExerciseOwnPr...'.
Type '{ id: number; testID: string; renderValueDifference: boolean | undefined; renderTags: boolean | undefined; }' is missing the following properties from type 'Readonly<Pick<ExerciseComponentProps, "wholeExerciseIsTouchable" | "middleIsTouchable" | "id" | "renderTags" | "renderValueDifference" | "testID"> & IExerciseOwnPropsJustLeftSectionTouchable>': wholeExerciseIsTouchable, middleIsTouchable
Странно то, что я могу опустить wholeExerciseIsTouchable
и middleIsTouchable
при написании ExerciseDumb
компонента, поэтому я подозреваю, что это какая-то проблема с ReduxПодключи метод.Но я понятия не имею, как обойти это.