Use multiple interfaces/types as Props in react with typescript.

While developing the react component, with respect to class and functional component. The main concern while developing is to pass props inside so that it will be ready to use in projects.

React functional component

const CustomComponent = () => {
   return(<>.....</>);
}

🤔 How to pass my props inside the component?

💡 Let me create an interface for this component that will accept n number of props inside. so that it can be more customize.

Custom Props interface

interface ICustomComponentProps {
   height: number;
   width: number;
}

Now using these props into the component.

const CustomComponent = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height } = props;

   /// Handle props

   return(<>.....</>);
}

Now props are accessible in the component.

Now I need to create more components.

const CustomComponentB = () => {
   return(<>.....</>);
}

Let me pass the same props inside CustomComponentB.

const CustomComponentB = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height } = props;

   /// Handle props

   return(<>.....</>);
}

Suddenly I realized that I need to add one more property to the above CustomComponentB.

🤔 How can I add one more property?

💡 let me add in the current interface.

interface ICustomComponentProps {
   ....
   fontSize: number;
}

Now the new snippet will be like

const CustomComponentB = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}

Cool it's working, but suddenly CustomComponentA is failing.😞

🤔 How to fix it?

Let me create another interface that will extend the ICustomComponentProps

interface INewComponentPropsB extends ICustomComponentProps {
   fontSize: number;
}

Now the new snippet will be like

const CustomComponentB = (props: INewComponentPropsB) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}

Here ComponentB is using INewComponent props that extend the initial props interface.

Cool it's working,

🤔 How to fix it without using extends keyword?

💡 use the &

Let me modify interface

interface INewComponentPropsB {
   fontSize: number;
}

Now the new snippet will be like

const CustomComponentB = (props: (ICustomComponentProps 
                                 & INewComponentPropsB)) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}

🎉 It's working !!!

Many Thanks for Reading this content.

Bonus: You can use type definitions also instead of interface declartion.

Comments

[Karl Krasnowsky]

Something I've been wondering (and will try shortly) , if I had a function that took a ICustomComponentProps as an argument, could I pass an instance of CustomComponentB (if using the extends method) to it and (if wanted) cast it to a INewComponentPropsB ?

[Alabi Temitope Wahab]

thanks this works for me

[Tawaliou]

Nice. I need it now

[Thomas Eilermann]

Thank you very much for yout solution of combining the interface with &