TypeScript Mix Props

When developing with TypeScript, it can sometimes be useful to mix props between components. This allows you to reuse props that are common among multiple components without having to duplicate the prop definitions.

How to Mix Props

To mix props between components, you can use the Partial utility type to define a type that includes all the props of another type, but with all the props set to optional.

interface ButtonProps {
  buttonText: string;
  onClick: () => void;
}

type ButtonPropsWithOptional = Partial<ButtonProps>;

interface InputProps {
  label: string;
  placeholder: string;
}

type InputPropsWithOptional = Partial<InputProps>;

interface FormProps extends ButtonPropsWithOptional, InputPropsWithOptional {}

In the example above, we create two new types (ButtonPropsWithOptional and InputPropsWithOptional) that extend the original interface types but with all their props set to optional. Then, we create a new FormProps interface that extends both new types, effectively mixing their props together.

Usage

Now, we can use the FormProps interface to define props for our form component.

interface FormProps extends ButtonPropsWithOptional, InputPropsWithOptional {}

const Form = ({ buttonText, onClick, label, placeholder }: FormProps) => (
  <form>
    <label>{label}</label>
    <input placeholder={placeholder} />
    <button onClick={onClick}>{buttonText || 'Submit'}</button>
  </form>
);

Benefits of Mixing Props

Using Partial to mix props between components can help reduce duplication and improve maintainability of your code. It also makes it easier to reuse common props across multiple components.

Conclusion

Mixing props in TypeScript is a powerful technique that can improve the organization and maintainability of your code. By using Partial, you can easily manage shared props across multiple components without the need for excessive duplication.