Wondering how to use TypeScript with your ReactJS project? This is the video for you! In this tutorial we’ll walk through how to start a new react typescript project, how to add typescript to an existing React JS project, how to describe Props using interfaces and types, how to set default props, how to provide types for event handlers, how to provide types for various hooks like useState and useReducer. Finally we’ll also discuss and show the benefits of doing all of this in actual typical development.

  • 00:00 - Intro
  • 00:21 - Setup for new or existing apps as well as component libraries
  • 02:40 - Components as arrow functions
  • 03:37 - Quick note about named vs default export
  • 05:44 - Switching from PropTypes to TS interfaces / types
  • 05:15 - Function Component return type
  • 10:40 - More examples of typing props
  • 11:45 - Typing function props and event handlers
  • 20:15 - How to provide types for useState hook
  • 23:14 - Providing types for useReducer state and dispatch
  • 29:22 - Check out the React Typescript Cheatsheets for more info
  • 29:49 - Quick example of typing Class Components
  • 30:25 - Conclusion / Outro

#typescript #react

React Typescript Tutorial 2021
3.75 GEEK