ModalStackParams. It's an interface you'll have to build that will represent the complete tree of your modals and the types their params are expecting.
#L11, we're letting TypeScript know that
<PokedexCard/>expects 3 props that should comply with the types specified in
ModalStackParams. We're doing this to ensure the type safety of these 3 props because we're using them
'PokedexEntryModal'and pass them as params.
ModalStackParams, we can now guesstimate that it could look something like this a minima:
ModalStackParamsas a generic to
#L42, instead, we directly provided it to
#L13. As you may know, with TypeScript,
React.Componentis a generic class that accepts up to 2 arguments:
React.Component<Props, State>. That's why
ModalPropalso accepts up to 2 arguments, your params interface and your component props and returns a type with your props type + the new
modalprop. There are a few things to notice here:
ModalProp. If you want, you can even use it without providing the params type. This means that the most basic way of using
class PokedexCard extends React.Component<ModalProp>
ModalComponentPropaccepts a 3rd argument, corresponding to the name of the modal represented by this component. If we reuse our Pokédex example,
'PokedexEntryModal'file could look like:
ModalComponentPropvoluntarily expects props types as its second argument as your modal component could be getting props from some HOCs. ie:
modalOptionsfrom within the modal component itself.
ModalComponentWithOptionsand you're done! The interface will also directly take care of the fact that you're using it on a component, so no need to use
React.FCwith it. ie: