IMO inline is harder to read. When using an explicit type or interface you have the props type declared separately and explicitly, which allows for e.g. reusing prop types or compositing types Answer from anyOtherBusiness on reddit.com
React TypeScript Cheatsheets
react-typescript-cheatsheet.netlify.app › typing component props
Typing Component Props | React TypeScript Cheatsheets
A list of TypeScript types you will likely use in a React+TypeScript app: type AppProps = { message: string; count: number; disabled: boolean; /** array of a type! */ names: string[]; /** string literals to specify exact string values, with a union type to join them together */ status: "waiting" | "success"; /** an object with known properties (but could have more at runtime) */ obj: { id: string; title: string; }; /** array of objects!
React
legacy.reactjs.org › docs › typechecking-with-proptypes.html
Typechecking With PropTypes – React
In this example, we are using a class component, but the same functionality could also be applied to function components, or components created by React.memo or React.forwardRef. PropTypes exports a range of validators that can be used to make sure the data you receive is valid. In this example, we’re using PropTypes.string. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes is only checked in development mode. Here is an example documenting the different validators provided: import PropTypes from 'prop-types'; MyComponent.propTypes = { // You can declare that a prop is a specific JS type.
Videos
00:47
React.ComponentProps is such a lifesaver - YouTube
13:57
#9 Typing your React Component Props with PROP-TYPES - YouTube
15:42
React Typescript for Beginners - Components, Props & useState in ...
00:43
The cleanest way to type React props - YouTube
Type-checking with Proptypes in React #21 React Course
12:09
PROPS in React explained 📧 - YouTube
Reddit
reddit.com › r/reactjs › recommended way to define props?
r/reactjs on Reddit: Recommended way to define props?
April 29, 2024 -
What is the recommended way to define props in a component? Where can I find either React or typescript documentation on recommended format? I've read through the docs but couldn't find a recommendation, especially between inline vs using type (there are recommendations on type vs interface but not inline vs separating out the props).
using interface
interface DrawerProps {
header: string;
}
function Drawer({
header,
}: DrawerProps): React.JSX.Element {
return <></>;
}or using type
type DrawerProps = {
header: string;
};
function Drawer({
header,
}: DrawerProps): React.JSX.Element {
return <></>;or inline
function Drawer({
header,
}: {
header: string;
}): React.JSX.Element {
return <></>;
} Top answer 1 of 13
26
IMO inline is harder to read. When using an explicit type or interface you have the props type declared separately and explicitly, which allows for e.g. reusing prop types or compositing types
2 of 13
15
interface MyComponentProps { prop1: string; } function MyComponent(props: MyComponentProps) { // ... }
npm
npmjs.com › package › prop-types
prop-types - npm
You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.
» npm install prop-types
Published Jan 05, 2022
Version 15.8.1
Repository https://github.com/facebook/prop-types
Homepage https://facebook.github.io/react/
GeeksforGeeks
geeksforgeeks.org › reactjs › reactjs-proptypes
ReactJS PropTypes - GeeksforGeeks
March 23, 2018 - PropTypes in ReactJS validate the types of props passed from parent to child components, helping catch errors early, improve debugging, and ensure consistent data handling.
Top answer 1 of 5
574
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.
2 of 5
41
Starting with TypeScript 2.8, you can use conditional types, e.g. given:
interface MyComponentProps { bar: string; }
declare const MyComponent: React.Component<MyComponentProps>;
interface MyComponentClassProps { bar: string; }
declare const MyComponentClass: React.ComponentClass<MyComponentClassProps>;
interface MyStatelessComponentProps { bar: string; }
declare const MyStatelessComponent: React.StatelessComponent<MyStatelessComponentProps>;
We can define these helpers:
type GetComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P> ? P : never
And use them like so:
// $ExpectType MyComponentProps
type MyComponentPropsExtracted = GetComponentProps<typeof MyComponent>
// $ExpectType MyComponentClassProps
type MyComponentClassPropsExtracted = GetComponentProps<typeof MyComponentClass>
// $ExpectType MyStatelessComponentProps
type MyStatelessComponentPropsExtracted = GetComponentProps<typeof MyStatelessComponent>
Update 2018-12-31: this is now available in the official React typings via React.ComponentProps.
Hygraph
hygraph.com › blog › react-proptypes
How to Use PropTypes in React | Hygraph
January 21, 2026 - By default, JavaScript does not have a built-in type-checking solution, so Microsoft introduced TypeScript. However, React has an internal method that you can use for props validation known as PropTypes.
Total TypeScript
totaltypescript.com › react-props-typescript
Strongly Typing React Props with TypeScript | Total TypeScript
September 5, 2023 - When typing React props in a TypeScript app, using interfaces is recommended, especially when dealing with complex intersections of props.
GitHub
github.com › jsx-eslint › eslint-plugin-react › blob › master › docs › rules › prop-types.md
eslint-plugin-react/docs/rules/prop-types.md at master · jsx-eslint/eslint-plugin-react
Generally, you should use PropTypes.node or static type React.Node for children.
Author jsx-eslint
React
react.dev › learn › typescript
Using TypeScript – React
The type describing your component’s props can be as simple or as complex as you need, though they should be an object type described with either a type or interface.
React
legacy.reactjs.org › docs › components-and-props.html
Components and Props – React
When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.
Ben Ilegbodu
benmvp.com › blog › typescript-react-props-interfaces-type-aliases
TypeScript React props: interfaces vs type aliases | Ben Ilegbodu
November 13, 2021 - By using Omit<>, the children prop is no longer in the object type intersected with the type that's overriding children as a number. As a result, we get the appearance of an override like with interface. In my Polymorphic React Components in TypeScript post, I use this Omit<> pattern because I knew that property name collisions were causing a problem, but I didn't understand why.
amanhimself.dev
amanhimself.dev › blog › prop-types-in-react-and-typescript
Prop types in React and TypeScript | amanhimself.dev
June 28, 2021 - It uses the @types/prop-types package to create type definitions. To use InferProps, import it from the prop-types library and then define type declarations on the components prop.
Smashing Magazine
smashingmagazine.com › 2020 › 08 › mastering-props-proptypes-react
Mastering Props And PropTypes In React — Smashing Magazine
August 17, 2020 - They are a core part of the component-driven and state-management architecture that React is designed around. PropTypes are a bonus for ensuring that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.
freeCodeCamp
freecodecamp.org › news › how-to-use-proptypes-in-react
How to Use PropTypes in React
June 26, 2025 - Props are the read-only properties that are shared between components to give the unidirectional flow of React a dynamic touch.
Total TypeScript
totaltypescript.com › react-component-props-type-helper
ComponentProps: React's Most Useful Type Helper | Total TypeScript
May 29, 2023 - import { ComponentProps } from "react"; type ButtonProps = ComponentProps<"button">; In the code above, the ButtonProps type extracts the type of props used by the button element.
Contentful
contentful.com › blog › react-proptypes
How to use PropTypes in React | Contentful
March 3, 2025 - Props (short for properties) allow you to pass data between components in React, making them integral for building reusable and dynamic interfaces. They allow parent components to pass values down to child components as arguments.
DEV Community
dev.to › typescripttv › typing-react-props-in-typescript-5hal
Typing React Props in TypeScript - DEV Community
July 14, 2022 - The HTMLProps support a variety of tags (HTMLDivElement, HTMLFormElement, HTMLInputElement, etc.). Make sure that the type variable matches the outmost tag (the first tag, that is mentioned after return): import React from 'react'; export interface Props extends React.HTMLProps<HTMLDivElement> { heading: string; } const PostPreview: React.FC<Props> = (props: Props) => { return ( <div> <h1>{props.heading}</h1> {props.children} </div> ); }; export default PostPreview;
Hands on React
handsonreact.com › proptypes
PropTypes | Hands on React
PropTypes was originally exposed as part of the React core module, and is commonly used with React components to type check props.
GitHub
github.com › facebook › prop-types
GitHub - facebook/prop-types: Runtime type checking for React props and similar objects · GitHub
You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.
Starred by 4.5K users
Forked by 348 users
Languages JavaScript