Curated Library

React with TypeScript: Typing Props, Hooks and Reusable Components

A short, code-along series on adding TypeScript to React components. It covers typing props (basic, advanced, event and style props), typing the core hooks, and then more advanced patterns such as generic, restricted and polymorphic components. It suits developers who already know basic React and want to write type-safe components. It is not a general introduction to TypeScript. A closing lesson covers debugging with React Developer Tools.

26 lessons 2h 50m total Development English Earns YodaCoins

Lessons by Codevolution on YouTube

Curated by YodaHut. These lessons are hosted on YouTube and produced by their original creators, who are not affiliated with YodaHut. You still earn YodaCoins, keep your streak and track progress here.

What You'll Learn

Set up a React project with TypeScript and type component props with types and interfaces
Type event handlers, style props and children, including passing components as props
Type useState, useReducer (with strict action types), useContext and useRef
Handle future or nullable values in state and context, and use type assertions
Build generic and restricted prop types using template literal types and Exclude
Wrap native HTML elements, extract another component's prop types, and write polymorphic components
Inspect and edit component state and profile renders with React Developer Tools

Prerequisites

Working knowledge of React: components, props, state and hooks
Basic JavaScript, including ES6 syntax
Node.js and a code editor installed (VS Code recommended)

About the Instructor

Codevolution

YouTube creator

26 lessons here 2h 50m

The lessons in this course were produced by Codevolution and are published on YouTube. YodaHut selected and sequenced them into this course; we did not make them, and Codevolution is not affiliated with YodaHut.

Visit the channel on YouTube