---
title: 'Common Prop Types in TypeScript and React'
date: '2021-06-29'
slug: 'common-prop-types-in-typescript-and-react'
thumbnail: '/thumbnails/typescript.png'
tag: 'typescript'
canonicalUrl: 'https://amanhimself.dev/blog/common-prop-types-in-typescript-and-react'
---

All **primitives in JS** are available in TS.

```ts
type Props = {
  size: number;
  name: string;
  disabled: boolean;
};
```

An **object** **type** is simply an empty object or an object with keys. An empty object can have any number of properties and values.

If the object is defined explicitly with keys, it will only accept those values. The shape of the object will remain certain.

```ts
type Props = {
  emptyObject: {};
  product: {
    id: string;
    price: number;
  };
};
```

Using square brackets `[]`, an **array type** is defined:

```ts
type ListProps = {
  items: string[];
};
```

The prop `items` here only expects values in the array of `string` type. To define an array of objects of a certain shape:

```ts
type ListProps = {
  items: {
    id: string;
    name: string;
    price: number;
  }[];
};
```

TypeScript does not asks you to define the shape of each object. Although, refactoring `ListProps` as below is valid:

```ts
type Item = {
  id: string;
  name: string;
  price: number;
};

type ListProps = {
  item: Item;
  items: Item[];
};
```

Using **[union type](https://react-typescript-cheatsheet.netlify.app/docs/basic/troubleshooting/types/#union-types-and-type-guarding)**, certain values for a prop can be described as:

```ts
type Button = {
  variant: 'primary' | 'danger' | 'info';
  value: string | number;
};
```

TypeScript cares when it comes to passing arguments on a function.

```ts
type Props = {
  onEventListener: () => void; // some times event listeners do not have return type
  onChangeText: (title: string) => void;
};
```

On a function, it is possible to define return type as inline type declaration:

```ts
function add(x: number, y: number): number {
  return a + b;
}
```


Common Prop Types in TypeScript and React

---
title: 'Prop types in React and TypeScript'
date: '2021-06-28'
slug: 'prop-types-in-react-and-typescript'
thumbnail: '/thumbnails/typescript.png'
tag: 'typescript'
canonicalUrl: 'https://amanhimself.dev/blog/prop-types-in-react-and-typescript/'
---

[PropTypes](https://www.npmjs.com/package/prop-types) 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.

```js
import React from 'react';
import PropTypes from 'prop-types';

// A component that accepts "color" prop
function FavoriteColor({ color }) {
  return <h2>My favorite Color is {color}</h2>;
}

FavoriteColor.propTypes = {
  color: PropTypes.string
};

// Parent component
function App() {
  return (
    <div className="App">
      <FavoriteColor color={'Red'} />
    </div>
  );
}

export 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](https://res.cloudinary.com/amanmittal/image/upload/v1624823701/s1_beblnm.png)

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.

```js
function App() {
  return (
    <div className="App">
      <FavoriteColor color={120} />
    </div>
  );
}
```

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

![s2](https://res.cloudinary.com/amanmittal/image/upload/v1624823701/s2_p9h3mq.png)

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](https://res.cloudinary.com/amanmittal/image/upload/v1624823702/s3_okboft.png)

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.

```tsx
import PropTypes, { InferProps } from 'prop-types';

function FavoriteColor({ color }: InferProps<typeof FavoriteColor.propTypes>) {
  return <h2>My favorite Color is </h2>;
}

FavoriteColor.propTypes = {
  color: PropTypes.string
};
```

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.

```tsx
type Props = {
  color: string;
};

function FavoriteColor({ color }: Props) {
  return <h2>My favorite Color is {color} </h2>;
}
```

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](https://res.cloudinary.com/amanmittal/image/upload/v1624823701/s4_fyz6bw.png)

## 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](https://res.cloudinary.com/amanmittal/image/upload/v1624823702/s5_m36cnq.png)

## Optional props in TypeScript

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

```tsx
type Props = {
  color?: string;
};
```


🔥 2 Posts filtered by tag "typescript"

Common Prop Types in TypeScript and React

Prop types in React and TypeScript