Ошибка распознавания Typescript и JSX и Redux Connect - PullRequest
0 голосов
/ 23 января 2019

У меня есть компонент 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Подключи метод.Но я понятия не имею, как обойти это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...