Prop types in React and TypeScript

Published on Jun 28, 2021

3 min read

TYPESCRIPT

PropTypes provide built-in typechecking capabilities when writing a React app. Checking the type of prop in a React component in a large application helps catch bugs at run-time.

Typically in a React app, you will need to install the package yarn add prop-types. Then, inside a component, explicitly define the type of a prop.

1import React from 'react';
2import PropTypes from 'prop-types';
3
4// A component that accepts "color" prop
5function FavoriteColor({ color }) {
6 return <h2>My favorite Color is {color}</h2>;
7}
8
9FavoriteColor.propTypes = {
10 color: PropTypes.string
11};
12
13// Parent component
14function App() {
15 return (
16 <div className="App">
17 <FavoriteColor color={'Red'} />
18 </div>
19 );
20}
21
22export default App;

Above code snippet will run fine, and there no errors or warnings yet. If you use VSCode, hover over the prop color in the App component. You will see the expected data type on the prop.

s1

But what if in the App component, the value of prop color is changed to a number by mistake. The component will still render in the web browser.

1function App() {
2 return (
3 <div className="App">
4 <FavoriteColor color={120} />
5 </div>
6 );
7}

But if you open the browser's Developer Tools and go to console, you will see the error.

s2

The prop-types package provide validation at run-time. Not a great developer experience (imagine large applications). Using TypeScript in a React application can make the developer experience better.

PropTypes with TypeScript and React

🔗

Take the previous code snippet, copy it in a .tsx file. Here is how the components will look. Notice the red squiggly line beneath the prop color.

s3

TypeScript is smart enough not to compile the code if a prop has a type of any.

Inferring PropTypes in TypeScript

🔗

PropTypes package offers InferProps that enables to infer the types for an existing prop-type definition on a component. 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.

1import PropTypes, { InferProps } from 'prop-types';
2
3function FavoriteColor({ color }: InferProps<typeof FavoriteColor.propTypes>) {
4 return <h2>My favorite Color is </h2>;
5}
6
7FavoriteColor.propTypes = {
8 color: PropTypes.string
9};

Code compiles, and there are no errors.

Using type keyword to declare prop type definitions

🔗

TypeScript comes with a type keyword. It can be used to define prop types without using the prop-types package.

1type Props = {
2 color: string;
3};
4
5function FavoriteColor({ color }: Props) {
6 return <h2>My favorite Color is {color} </h2>;
7}

The VSCode IntelliSense will detect the type of color prop in the App component. It will allow you to provide anything other than a string value for this prop.

s4

Props are required in TypeScript

🔗

Another difference to notice here is that, with TypeScript, all props required by default. In the prop-types package, all props are optional by default. To make a prop required, you will have to use .isRequired explicitly.

With TypeScript, that is not the case.

s5

Optional props in TypeScript

🔗

If a component has an optional prop, add a question mark when declaring prop type:

1type Props = {
2 color?: string;
3};

More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. In this blog, I write about Technical writing, Node.js, React Native and Expo.

Currently, working at Expo. Previously, I've worked as a Developer Advocate, and Senior Content Developer with companies like Draftbit, Vercel and Crowdbotics.


Copyright ©  2019-2022 Aman Mittal · All Rights Reserved.