--- title: TypeScript in React - Full Tutorial | daily.dev description: A comprehensive tutorial on using TypeScript in React projects, covering the full workflow of migrating a React app (Assembly Endgame hangman game) to... canonical: https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: TypeScript in React - Full Tutorial | daily.dev og:description: A comprehensive tutorial on using TypeScript in React projects, covering the full workflow of migrating a React app (Assembly Endgame hangman game) to... og:url: https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv og:image: https://api.daily.dev/og/posts/ltvsS7Ksv.png og:image:alt: TypeScript in React - Full Tutorial 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. # TypeScript in React - Full Tutorial **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · 51 min read · 8 upvotes · 0 comments ## Summary A comprehensive tutorial on using TypeScript in React projects, covering the full workflow of migrating a React app (Assembly Endgame hangman game) to TypeScript. Topics include setting up a Vite+TypeScript project, typing useState with generics, typing functional components with JSX.Element return types, typing component props both inline and with custom types, importing types across files, and typing function props passed as callbacks. The tutorial uses hands-on challenges throughout to reinforce each concept. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I explicitly type a React functional component's return value in TypeScript? Import the JSX type from React with 'import type { JSX } from react' and annotate the function's return value as JSX.Element. If the component can also return null, such as one rendering conditionally, type the return value as a union: JSX.Element or null. This is more explicit than relying on React.FC, which some developers avoid because it implicitly adds children to props. _Developers formalizing component typing conventions can compare approaches like this on daily.dev._ ### How do you type a function that is passed as a React component prop in TypeScript? Define the prop using arrow function syntax inside the custom prop type: give the prop a name, list its parameter names and types in parentheses, add an arrow, then the return type. For example, a prop called startNewGame with no parameters and no return value is typed as startNewGame: () => void. A prop taking a string and returning a number would be name: (value: string) => number. _Anyone typing callback props in React can revisit patterns like this via daily.dev._ ### How do I explicitly type the useState hook in TypeScript when the initial value doesn't fully capture the intended type? Pass a generic type argument to useState using angle brackets, such as useState([]), instead of relying on inference from the initial value alone. Without this, an empty array initial value infers as any[] rather than string[], leaving type checking too loose. Explicitly supplying the generic ensures both the getter and setter enforce the correct type. _Developers pinning down useState typing gaps can find walkthroughs like this on daily.dev._ ## Similar posts on daily.dev - [Level Up Your React Skills with Typescript](https://daily.dev/posts/level-up-your-react-skills-with-typescript-tavhnaidj) · freeCodeCamp · 248 upvotes · 10 comments - [ReactJs CRUD with typescript and json-server](https://daily.dev/posts/reactjs-crud-with-typescript-and-json-server-ryrogo8cw) · Medium · 2 upvotes · 0 comments - [Intro \+ Setup](https://daily.dev/posts/intro-setup-k1mdkmrf4) · Larablog · 0 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#vite](https://daily.dev/tags/vite) [View this post on daily.dev](https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv) ```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":"TypeScript in React - Full Tutorial","url":"https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv"},"datePublished":"2026-07-08T13:16:50.461Z","dateModified":"2026-09-14T08:27:24.409Z","description":"A comprehensive tutorial on using TypeScript in React projects, covering the full workflow of migrating a React app (Assembly Endgame hangman game) to...","image":"https://i.ytimg.com/vi/aJP1AbZSqz8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/aJP1AbZSqz8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"freeCodeCamp","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":"freeCodeCamp","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp","url":"https://daily.dev/sources/freecodecamp"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,typescript,vite","timeRequired":"PT51M","video":{"@type":"VideoObject","name":"TypeScript in React - Full Tutorial","description":"A comprehensive tutorial on using TypeScript in React projects, covering the full workflow of migrating a React app (Assembly Endgame hangman game) to...","thumbnailUrl":"https://i.ytimg.com/vi/aJP1AbZSqz8/sddefault.jpg","uploadDate":"2026-07-08T13:16:50.461Z","duration":"PT51M","url":"https://api.daily.dev/r/ltvsS7Ksv","embedUrl":"https://www.youtube.com/embed/aJP1AbZSqz8"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"TypeScript in React - Full Tutorial"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/typescript-in-react---full-tutorial-ltvss7ksv#faq","mainEntity":[{"@type":"Question","name":"How do I explicitly type a React functional component's return value in TypeScript?","acceptedAnswer":{"@type":"Answer","text":"Import the JSX type from React with 'import type { JSX } from react' and annotate the function's return value as JSX.Element. If the component can also return null, such as one rendering conditionally, type the return value as a union: JSX.Element or null. This is more explicit than relying on React.FC, which some developers avoid because it implicitly adds children to props. Developers formalizing component typing conventions can compare approaches like this on daily.dev."}},{"@type":"Question","name":"How do you type a function that is passed as a React component prop in TypeScript?","acceptedAnswer":{"@type":"Answer","text":"Define the prop using arrow function syntax inside the custom prop type: give the prop a name, list its parameter names and types in parentheses, add an arrow, then the return type. For example, a prop called startNewGame with no parameters and no return value is typed as startNewGame: () => void. A prop taking a string and returning a number would be name: (value: string) => number. Anyone typing callback props in React can revisit patterns like this via daily.dev."}},{"@type":"Question","name":"How do I explicitly type the useState hook in TypeScript when the initial value doesn't fully capture the intended type?","acceptedAnswer":{"@type":"Answer","text":"Pass a generic type argument to useState using angle brackets, such as useState([]), instead of relying on inference from the initial value alone. Without this, an empty array initial value infers as any[] rather than string[], leaving type checking too loose. Explicitly supplying the generic ensures both the getter and setter enforce the correct type. Developers pinning down useState typing gaps can find walkthroughs like this on daily.dev."}}]} ```