Add new props to component without making a wrapper component - TypeScript

In TypeScript, you can add new props to a component without making a wrapper component by leveraging the concept of union types and intersection types. By using these types, you can combine the original props of the component with the new props you want to add.

Here's an example of how to achieve this:

Assume you have a component called OriginalComponent with the following props:

tsxCopy code
interface OriginalProps {
  prop1: string;
  prop2: number;
}

const OriginalComponent: React.FC<OriginalProps> = ({ prop1, prop2 }) => {
  return (
    <div>
      <p>Prop1: {prop1}</p>
      <p>Prop2: {prop2}</p>
    </div>
  );
};

Now, you want to add a new prop called prop3 of type boolean to the OriginalComponent without creating a wrapper component. You can create a new type that combines the original props with the new prop using the intersection type (&).

tsxCopy code
type NewProps = {
  prop3: boolean;
};

type FinalProps = OriginalProps & NewProps;

const FinalComponent: React.FC<FinalProps> = ({ prop1, prop2, prop3 }) => {
  return (
    <div>
      <p>Prop1: {prop1}</p>
      <p>Prop2: {prop2}</p>
      <p>Prop3: {prop3.toString()}</p>
    </div>
  );
};

In the FinalComponent, we use the FinalProps type, which is the intersection of the original props (OriginalProps) and the new prop (NewProps). This allows us to use all three props (prop1, prop2, and prop3) in the FinalComponent.

Now, you can use the FinalComponent with all three props without creating a wrapper component:

tsxCopy code
const App: React.FC = () => {
  return <FinalComponent prop1="Hello" prop2={42} prop3={true} />;
};

This way, you can extend the props of the original component without the need for a separate wrapper component.