How to reuse component's props in TypeScript

We often find ourself defining types for the props that are not actually part of that component and are used in some other component.

Lets take a simple example:
Suppose we have a Parent and a Child component with following props.

import React from 'react';
import { Child } from './Child';

type Props = {
  greeting: string;
  firstName: string;
  lastName: string;
};

export const Parent: React.FC<Props> = ({ greeting, firstName, lastName }) => {
  return (
    <>
      <span> {greeting}</span>
      <Child firstName={firstName} lastName={lastName} />
    </>
  );
};

import React from 'react';

type Props = {
  firstName: string;
  lastName: string;
};

export const Child: React.FC<Props> = ({ firstName, lastName }) => {
  return (
    <>
      <div>{firstName}</div>
      <div>{lastName}</div>
    </>
  );
};

⚠️ Problem Statement:

Repetitive Props

• Type for firstName and lastName are also defined in Parent because it needs to be passed down to the Child component.

Code Sync issues

• If one part changes we need to make sure the others stays in sync.

• If the Child component is used in a similar pattern elsewhere we need to make sure we update the props there too.

💡 Solution:

We can use ComponentProps to extract the Props directly form the component's type and use rest and spread syntax to avoid repetition.

import React, { ComponentProps } from 'react';
import { Child } from './Child';

type Props = ComponentProps<typeof Child> & {
  greeting: string;
};

export const Parent: React.FC<Props> = ({ greeting, ...childProps }) => {
  return (
    <>
      <span> {greeting}</span>
      <Child {...childProps} />
    </>
  );
};

Benefits:

• Creating the parent's props by merging them with it's child's solves the code sync issues.
• Makes a unique source of truth.

PS: If you only need some of the props in the Child component, you can use Partials.

#coding #softwareengineering #productivity #webdeveloper #cleancode #codingtips #javascript #webdev #devlife #programming #computerscience