DEV Community

Umesh Verma
Umesh Verma

Posted on

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(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

🤔 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;
}
Enter fullscreen mode Exit fullscreen mode

Now using these props into the component.

const CustomComponent = (props: ICustomComponentProps) => {

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

   /// Handle props

   return(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

Now props are accessible in the component.

Now I need to create more components.

const CustomComponentB = () => {
   return(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

Let me pass the same props inside CustomComponentB.

const CustomComponentB = (props: ICustomComponentProps) => {

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

   /// Handle props

   return(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Now the new snippet will be like

const CustomComponentB = (props: ICustomComponentProps) => {

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

   /// Handle props

   return(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Now the new snippet will be like

const CustomComponentB = (props: INewComponentPropsB) => {

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

   /// Handle props

   return(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Now the new snippet will be like

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

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

   /// Handle props

   return(<>.....</>);
}
Enter fullscreen mode Exit fullscreen mode

🎉 It's working !!!

Many Thanks for Reading this content.

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

Top comments (4)

Collapse
 
karlkras profile image
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 ?

Collapse
 
alabitemitopew1 profile image
Alabi Temitope Wahab

thanks this works for me

Collapse
 
tawaliou profile image
Tawaliou

Nice. I need it now

Collapse
 
purebase profile image
Thomas Eilermann

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