Question

我有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也将它们定义为< em>虚假

例如，如果我编写这样的组件：

<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的Connect方法有关。但是我不知道该如何解决。

打字稿辨别联合＆JSX＆Redux Connect错误

0 个答案: