Question 259748 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can i guarantee that if a is a type of A, then b is a type of B in typescript

Let’s assume that we have several types:

interface ModalType {
   preview: ReactElement;
   edit: ReactElement;
}


interface PreviewModalProps {
   username: string;
}

interface EditModalProps {
   title: string;
   description: string;
}


type ModalPropsType = PreviewModalProps | EditModalProps;

const modals: ModalType = {
   preview: <PreviewModalComponent />
   edit: <EditModalComponent />
}

type ModalName = keyof ModalType;

const modalName: ModalName = 'preview'

// pass it somewhere else

In this example I want to be sure, that if our modalName has the preview value,then our props should correspond to a PreviewModalProps, not the EditModalProps.

How can I connect it everything toghether?

Tags:

2

Answers


  1. 0

    If you want to combine ModalProps,

    Combining with "&" operator, you can achieve it.

    type ModalPropsType = {
  name: "preview"
} & PreviewModalProps | {
  name: "edit"
} & EditModalProps;
    Login or Signup to reply.
  2. 0

    There’s no way to do that at the top level, but you can easily do that by creating a couple of wrappers to form a discriminated union:

    interface Preview {
  name: 'preview' // NOTE: this is a string literal *type*
  props: PreviewModalProps
}

interface Edit {
  name: 'edit' // ditto
  props: EditModalProps
}

    If you use those interfaces the compiler won’t let you assign the wrong ones, and if you check the discriminant (name in this case) in a conditional the compiler will narrow the type:

    function doesTheThing(x: Preview | Edit) {
  if (x.name === 'preview') {
    // here compiler knows we have PreviewModalProps for x.props
  } else {
    // here compiler knows x.props must be EditModalProps
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search