Notes on TypeScript: Accessing Non Exported Component Prop Types

Problem Definition

Sometimes we need to access some component prop types, but they have not been exported.
Then there are also cases where we would rather avoid having to export any additional types, to reduce complexity. What can developers consuming a component with non exported types do, to access these types when needed? There are different ways to achieve this with TypeScript, so let's see how the problem can be solved.

Low Level Approach

One way too access non exported types is to write your own type extraction helper:

type componentProps<T> = T extends
  | React.ComponentType<infer Props>
  | React.Component<infer Props>
  ? Props
  : never;

Let's breakdown the helper to gain a better understanding of how TypeScript can infer React component props.

React.ComponentType is an alias for a class or a function component and by using infer P we let TypeScript infer any Props for the ComponentType or a React.Component itself.

We then either return the inferred Props or never.
The never type is used to represent any value that never occurs, i.e. a function that throws an error.

By using the the componentProps helper, we can now access the component props.

type User = {
  id: number;
  name: string;
  title: string;
  location: string;
};

const User = (props: User) => {
  return (
    <div>
      {/* ... */}
    </div>
  )
};

type ActionPropTypes = React.ComponentProps<typeof User>;

const UserWrapper = (props: ActionPropTypes) => {
  return (
    <div>
      <div>{props.name}</div>
      <User {...props} />
    </div>
  );
};

Modern Approach

Interestingly we can also use the React.ComponentProps from React types now.
The above example could be rewritten to:

type ActionPropTypes = React.ComponentProps<typeof User>;

More Information

React-TypeScript-Cheatsheet: Basic

React-TypeScript-Cheatsheet: Advanced

Answer on Stackoverflow

If you have any questions or feedback please leave a comment here or connect via Twitter: A. Sharif