Typescript React: Access component property types

by

2019: noticed all answers above are quite outdated so here is a fresh one.

Lookup type

With newer TS versions you can use lookup types. 

type ViewProps = View['props']

Despite being very convenient, that will only work with class components.

React.ComponentProps

The React typedefs ship with an utility to extract the type of the props from any component.

type ViewProps = React.ComponentProps<typeof View>

type InputProps = React.ComponentProps<'input'>

This is a bit more verbose, but unlike the type lookup solution:

  • the developer intent is more clear
  • this will work with BOTH functional components and class components

All this makes this solution the most future-proof one: if you decide to migrate from classes to hooks, you won’t need to refactor any client code.

More Related Contents:

  1. PropTypes in a TypeScript React Application
  2. How to use refs in React with Typescript
  3. Typescript input onchange event.target.value
  4. What does the error “JSX element type ‘…’ does not have any construct or call signatures” mean?
  5. Property ‘value’ does not exist on type ‘Readonly’
  6. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  7. Typescript image import
  8. mobx-react observer don’t fires when I set observable
  9. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  10. Set types on useState React Hook with TypeScript
  11. Cannot use JSX unless the ‘–jsx’ flag is provided
  12. Importing images in TypeScript React – “Cannot find module”
  13. Default property value in React component using TypeScript
  14. How to type a page component with props in Next.js?
  15. What does the colon mean in Javascript after function?
  16. React Hooks – Modified state not reflecting immediately
  17. React Hooks – Modified state not reflecting immediately
  18. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  19. React with Typescript — Generics while using React.forwardRef
  20. Is it possible to limit children to specific components using React with TypeScript?
  21. is it possible to React.useState(() => {}) in React?
  22. How do I type this ‘as’ JSX attribute in TypeScript?
  23. How to define css variables in style attribute in React and TypeScript
  24. How to assign the correct typing to React.cloneElement when giving properties to children?
  25. Disable ESLint that create-react-app provides
  26. Webpack & Typescript image import
  27. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  28. Only allow specific components as children in React and Typescript
  29. ‘React’ was used before it was defined
  30. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes

Leave a Comment