<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri" -->

---
title: How to type React Components with TypeScript | daily.dev
description: TypeScript is useful if you’re coding middle and bigger size web applications. Annotating variables, objects, and functions creates contracts between different...
canonical: https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: How to type React Components with TypeScript | daily.dev
og:description: TypeScript is useful if you’re coding middle and bigger size web applications. Annotating variables, objects, and functions creates contracts between different...
og:url: https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri
og:image: https://api.daily.dev/og/posts/wa3mEsgRi.png
og:image:alt: How to type React Components with TypeScript
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# How to type React Components with TypeScript

**[JSK](https://daily.dev/sources/jsk)** · 5 min read · 22 upvotes · 5 comments

## Summary

TypeScript is useful if you’re coding middle and bigger size web applications. Annotating variables, objects, and functions creates contracts between different parts of your application. In this post, I’m going to discuss why and how to use TypeScript to type React components.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://dmitripavlutin.com/typescript-react-components/>

## Community discussion

Top comments from developers on daily.dev.

**@jonrose** · 1 upvotes

> Everything in this is correct. But I do wonder about the lack of mention of React.FC. It's, IMHO, the easiest way to type Function components.

**@giri** · 0 upvotes

> I am comfortable in react javascript

**@giri** · 0 upvotes

> react typescript

**@ignusg** · 0 upvotes

> I like to use
>
> interface MyComponentProps extends
>   React.PropsWithChildren<{}> {
>     otherProp: boolean;
>   }
>
> It is a bit roundabout but I prefer this for larger components. For very small components I would just put my props inside of the generic of PropsWithChildren and assign that to a type like so
>
> type MyComponentProps =
>   React.PropsWithChildren<{
>     otherProp: boolean;
>   }>
>
> Using this helper will match all valid react children and you won’t have to worry about breaking updates of react either (if children were to get a new accepting type or something). You can easily remove it...

---

Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript)

[View this post on daily.dev](https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"How to type React Components with TypeScript","url":"https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri"},"datePublished":"2021-09-30T13:15:49.500Z","dateModified":"2021-10-07T14:17:10.317Z","description":"TypeScript is useful if you’re coding middle and bigger size web applications. Annotating variables, objects, and functions creates contracts between different...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9d64c276777c6f182a842826d9b4f991","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9d64c276777c6f182a842826d9b4f991","isAccessibleForFree":true,"articleSection":"JSK","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"JSK","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/jsk","url":"https://daily.dev/sources/jsk"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":22},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"react,typescript","timeRequired":"PT5M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"JSK","item":"https://daily.dev/sources/jsk"},{"@type":"ListItem","position":3,"name":"How to type React Components with TypeScript"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-to-type-react-components-with-typescript-wa3mesgri","comment":[{"@type":"Comment","text":"Everything in this is correct. But I do wonder about the lack of mention of React.FC. It’s, IMHO, the easiest way to type Function components.","datePublished":"2021-09-30T13:32:44.170Z","url":"https://daily.dev/posts/wa3mEsgRi#c-VYECqYyev","author":{"@type":"Person","name":"Jon Rose","url":"https://daily.dev/jonrose","image":"https://avatars.githubusercontent.com/u/60586549?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"I am comfortable in react javascript","datePublished":"2021-10-01T13:16:17.257Z","url":"https://daily.dev/posts/wa3mEsgRi#c-NZcT3PGw_","author":{"@type":"Person","name":"Giri Bhushan Ch","url":"https://daily.dev/giri","image":"https://lh3.googleusercontent.com/a-/AOh14Gh8b6B8_EYDg0tS1aSrqh2IwJTgym9e00QIzvzmvg=s100"}},{"@type":"Comment","text":"react typescript","datePublished":"2021-10-01T13:16:59.668Z","url":"https://daily.dev/posts/wa3mEsgRi#c-rEUue__9v","author":{"@type":"Person","name":"Giri Bhushan Ch","url":"https://daily.dev/giri","image":"https://lh3.googleusercontent.com/a-/AOh14Gh8b6B8_EYDg0tS1aSrqh2IwJTgym9e00QIzvzmvg=s100"}},{"@type":"Comment","text":"I like to use\ninterface MyComponentProps extends \n  React.PropsWithChildren&lt;{}&gt; {\n    otherProp: boolean;\n  }\nIt is a bit roundabout but I prefer this for larger components. For very small components I would just put my props inside of the generic of PropsWithChildren and assign that to a type like so\ntype MyComponentProps = \n  React.PropsWithChildren&lt;{\n    otherProp: boolean;\n  }&gt;\nUsing this helper will match all valid react children and you won’t have to worry about breaking updates of react either (if children were to get a new accepting type or something). You can easily remove it and leave just your own props if you don’t want to allow any children.","datePublished":"2021-09-30T22:08:40.976Z","url":"https://daily.dev/posts/wa3mEsgRi#c-_tnL4hksV","author":{"@type":"Person","name":"IgnusG","url":"https://daily.dev/ignusg","image":"https://media.daily.dev/image/upload/f_auto/v1643464938/avatars/PlPdeFARQ"}}]}
```