Using TypeScript with React
Gain insights into integrating TypeScript with React to improve productivity. Learn about strongly-typed props, state, and events, and set up projects using Create React App, Webpack, and Babel.
Carl Rippon has been in the software industry for over 20 years developing a complex line of business applications in various sectors. He has spent the last 3 years building single page applications using ASP.NET Core, ReactJS, and TypeScript. Carl has written over 100 blog posts on various technologies.
Join 3.1 million developers at
What You'll Learn
- Explain how TypeScript improves React development via type checking, navigation, and refactoring
- Apply TypeScript annotations and inference to type variables, parameters, and return values
- Create reusable types with aliases, interfaces, unions, intersections, and standard utility generics
- Implement generics in functions, interfaces, type aliases, and classes for reusable type-safe code
- Type React component props and state in function and class components (useState, useReducer)
- Create strongly-typed events, handlers, context, and refs in React using TypeScript
- Set up React+TypeScript projects using Create React App or manual Webpack and Babel configuration
Learning Roadmap
1.
Why TypeScript?
Why TypeScript?
2.
Using basic types
Using basic types
3.
Creating types
Creating types
9 Lessons
9 Lessons
4.
Working with generic types
Working with generic types
6 Lessons
6 Lessons
5.
Creating strongly-typed function component props
Creating strongly-typed function component props
6 Lessons
6 Lessons
6.
Creating strongly-typed function component state
Creating strongly-typed function component state
3 Lessons
3 Lessons
7.
Creating strongly-typed class components
Creating strongly-typed class components
4 Lessons
4 Lessons
8.
Creating strongly-typed component events and event handlers
Creating strongly-typed component events and event handlers
3 Lessons
3 Lessons
9.
Creating strongly-typed context
Creating strongly-typed context
4 Lessons
4 Lessons
10.
Creating strongly-typed refs
Creating strongly-typed refs
3 Lessons
3 Lessons
11.
Creating React projects with TypeScript using Create React App
Creating React projects with TypeScript using Create React App
4 Lessons
4 Lessons
12.
Creating a React and TypeScript project manually
Creating a React and TypeScript project manually
7 Lessons
7 Lessons
13.
Putting everything together
Putting everything together
3 Lessons
3 Lessons
Carl Rippon
Carl Rippon has been in the software industry for over 20 years developing complex line of business applications in various sectors. He has spent the last 3 years building single page applications using ASP.NET Core, ReactJS, and TypeScript.
Trusted by 3.1 million developers working at companies
Anthony Walker
@_webarchitect_
Evan Dunbar
ML Engineer
Software Developer
Carlos Matias La Borde
Souvik Kundu
Front-end Developer
Vinay Krishnaiah
Software Developer
Built for 10x Developers












Free Resources