loading...

Notes on TypeScript: Accessing Non Exported Component Prop Types

busypeoples profile image A. Sharif ・2 min read

Notes on TypeScript (17 Part Series)

1) Notes on TypeScript: Pick, Exclude and Higher Order Components 2) Notes on TypeScript: Render Props 3 ... 15 3) Notes on TypeScript: Accessing Non Exported Component Prop Types 4) Notes on TypeScript: ReturnType 5) Notes on TypeScript: Phantom Types 6) Notes on TypeScript: Type Level Programming Part 1 7) Notes on TypeScript: Conditional Types 8) Notes on TypeScript: Mapped Types and Lookup Types 9) Notes on TypeScript: React and Generics 10) Notes on TypeScript: Fundamentals For Getting Started 11) Notes on TypeScript: Type Level Programming Part 2 12) Notes on TypeScript: Inferring React PropTypes 13) Notes on TypeScript: React Hooks 14) Notes on TypeScript: Recursive Type Aliases and Immutability 15) Notes on TypeScript: Handling Side-Effects 16) Notes on TypeScript: Type Level Programming Part 3 17) Notes on TypeScript: Building a validation library

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

Notes on TypeScript (17 Part Series)

1) Notes on TypeScript: Pick, Exclude and Higher Order Components 2) Notes on TypeScript: Render Props 3 ... 15 3) Notes on TypeScript: Accessing Non Exported Component Prop Types 4) Notes on TypeScript: ReturnType 5) Notes on TypeScript: Phantom Types 6) Notes on TypeScript: Type Level Programming Part 1 7) Notes on TypeScript: Conditional Types 8) Notes on TypeScript: Mapped Types and Lookup Types 9) Notes on TypeScript: React and Generics 10) Notes on TypeScript: Fundamentals For Getting Started 11) Notes on TypeScript: Type Level Programming Part 2 12) Notes on TypeScript: Inferring React PropTypes 13) Notes on TypeScript: React Hooks 14) Notes on TypeScript: Recursive Type Aliases and Immutability 15) Notes on TypeScript: Handling Side-Effects 16) Notes on TypeScript: Type Level Programming Part 3 17) Notes on TypeScript: Building a validation library

Posted on Jan 25 '19 by:

busypeoples profile

A. Sharif

@busypeoples

Focusing on quality. Software Development. Product Management. https://twitter.com/sharifsbeat

Discussion

markdown guide