Type Checking

Articles & Tutorials

The modern guide to React prop types (blog.logrocket.com)
Mar 23, 2021
Type checking in React through the prop-types package ensures that you know what each variable stores even if documentation is lacking or not helpful. In this discourse, we examine prop types in depth to help you build a quality codebase.
  • Andrew Evans
How to use React Context with TypeScript (blog.logrocket.com)
Nov 05, 2020
In this guide, we will learn how to use TypeScript with React Context by building a to-do app from scratch. Let’s dive in.
  • Ibrahima Ndaw
How to build React components for codebases that use JavaScript and TypeScript (blog.logrocket.com)
May 28, 2020
In this article, we’ll be looking at how we can use TypeScript with React and built components that are usable within both TypeScript and JavaScript files.
  • Austin Roy Omondi
Setting TypeScript For Modern React Projects Using Webpack And Babel (smashingmagazine.com)
May 11, 2020
This article introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router.
  • Blessing Krofegha
How to Migrate a React App to TypeScript (sitepoint.com)
Mar 12, 2020
The purpose of this article is to be that friend for you and help you migrate your own project to TypeScript. For context, I will be using pieces from a personal project which I migrated while going through this process myself.
  • Joe Previte
How to build a type-safe React Redux app (blog.logrocket.com)
Mar 06, 2020
Adding a type checking feature to your React application can help you catch lots of bugs at compile time. In this tutorial, we’ll demonstrate how to build a type-safe React Redux app by examining a real-world example.
  • Ganesh Mani
React TypeScript: Basics and Best Practices (blog.bitsrc.io)
Mar 03, 2020
An updated handbook/cheat sheet for working with React.js with TypeScript.
  • Fernando Doglio
How to Build a Modular React TypeScript Library (blog.bitsrc.io)
Feb 25, 2020
How to continuously build and grow your modular React Library.
  • Fernando Doglio
Gradually using TypeScript in Your React Project (blog.bitsrc.io)
Feb 04, 2020
How to safely build and introduce React TypeScript components into your React JS project.
  • Fernando Doglio
React with TypeScript: Best Practices (sitepoint.com)
Jan 16, 2020
React and TypeScript are two awesome technologies used by a lot of developers these days. Knowing how to do things can get tricky, and sometimes it’s hard to find the right answer. Not to worry. We’ve put together the best practices along with examples to clarify any doubts you may have.
  • Joe Previte
Some neat things to know when working with React and TypeScript (react.christmas)
Dec 21, 2019
I started working with React and TypeScript about six months ago. Since then I’ve learned a lot, and there are a few things I wish I knew when I started out that would have saved me from messy solutions and some frustrating moments. Here are the ones I think are the most useful.
  • Bendik Ibenholt
How to write correctly typed React components with TypeScript (blog.logrocket.com)
Dec 05, 2019
If you are a software developer — especially if you write JavaScript — then you have probably heard of TypeScript.
  • Piero Borrelli
Static vs Dynamic Type Checking in React (blog.bitsrc.io)
Nov 26, 2019
Learn what is type-checking and when it’s best to use each of its two forms.
  • Fernando Doglio
Migrating from JavaScript to TypeScript in a Real World React Project (drublic.de)
Sep 07, 2019
This article covers the way me and the team I am working with migrate a React application from JavaScript to TypeScript over the last couple of months and onwards. The goal is to help developers with the same idea to get a hold on where to start.
  • Hans Christian Reinl
Getting started with React and TypeScript (ultimatecourses.com)
Aug 26, 2019
To make our components resilient, and better understand the data props being passed into them, we can add TypeScript support to our React applications and type our props.
  • Chris Whited
An Expense App with React and TypeScript (telerik.com)
Aug 07, 2019
In this article, we're going to build a modern expense app using React and TypeScript, and understand why more and more developers are starting to use TypeScript. We're going to learn how we can use TypeScript to build better React components using types.
  • Leonardo Maldonado
Redux with Code-Splitting and Type Checking (blogs.dropbox.com)
Jul 16, 2019
This article assumes a working knowledge of Redux, React, React-Redux, TypeScript, and uses a little bit of Lodash for convenience.
  • Matthew Gerstman
Learning TypeScript with React - Part 1 (dev.to)
Jul 01, 2019
Understanding what are types, type annotations, why use them and how to use them can help you catch errors during development while also enhancing code quality and readability.
  • Ana Liza Pandac
Making unit tests fail when PropTypes error (javascriptplayground.com)
Jun 03, 2019
Documenting components with React's PropTypes library is a great way to be notified when you've forgotten to pass a certain prop. Today we're going to see how we can leverage these to make our tests fail when our PropTypes are incorrect.
Typing Next.JS components using TypeScript (medium.com)
May 22, 2019
In this article, we’ll talk about typing Next.JS components. We’ll be using this Next.JS application that connects to Reddit API and displays a list of top posts in a given subreddit.
  • Konstantin Lebedev
Build a Tic Tac Toe App with TypeScript, React and Mocha (blog.bitsrc.io)
May 20, 2019
Learn how to compose a tic-tac-toe app with React and TypeScript components.
  • Josh Kuttler
Typescript & React: Manipulating Prop Types (medium.com)
Apr 27, 2019
How to use Extend and Pick helpers with generic types, intersection types, and more.
  • Ross Bulat
TypeScript and React, BFF (telerik.com)
Feb 28, 2019
TypeScript and React are an increasingly common pair. Learn how to get up and running with TypeScript for your next React project.
How to Use TypeScript in React (blog.ionicframework.com)
Feb 13, 2019
Over the past couple of years, TypeScript has started to gain momentum in the React world and, now, has official support in create-react-app. So, we thought it would be helpful to share a little tutorial on how to kick off a new React project using TypeScript.
  • Ely Lucas
Using TypeScript with React (alligator.io)
Feb 11, 2019
TypeScript is awesome. So is React. Let’s use them both together! Using TypeScript allows us to get the benefits of IntelliSense, as well as the ability to further reason about our code. As well as this, adopting TypeScript is easy as files can be incrementally upgraded without causing issues throughout the rest of your project.
  • Paul Halliday
Master PropTypes in React (blog.bitsrc.io)
Feb 11, 2019
A useful guide to React propTypes and type checking
  • Sukhjinder Arora
Understanding React PropTypes - Type-Checking in React (blog.bitsrc.io)
Feb 05, 2019
In my last post we talked about how to set default props value in our React components using the defaultProps property. In this post we will continue with the streak, we will see how to type the props argument.
  • Chidume Nnamdi
paypal-scripts now supports TypeScript as well as JavaScript (medium.com)
Jan 21, 2019
What happened that made TypeScript viable for me and worth migrating paypal-scripts for.
Using TypeScript With React Native (medium.com)
Jan 18, 2019
In this tutorial, you are going to learn how to set up a React Native project with TypeScript.
  • Jan Hesters
Porting 30K lines of code from Flow to TypeScript (davidgom.es)
Jan 13, 2019
We recently ported MemSQL Studio's 30 thousand lines of JavaScript from using Flow to TypeScript. In this article, I describe why we ported our codebase, how it took place and how it has been working out for us.
  • David Gomes
A Reason React Tutorial for Beginners [2018] (robinwieruch.de)
Dec 01, 2018
Learn how to build a Reason React application with this tutorial. You will use the GitHub API to fetch real data, render forms and data, and style your ReasonReact application with inline style and bs-css
  • Benjamin Johnson
Make your React components great with TypeScript mapped and conditional types (medium.freecodecamp.org)
Nov 19, 2018
You’ve probably heard about TypeScript. You may have heard someone claiming how great type safety is.
  • Deepu K Sasidharan
Build 100% type-safe React apps in vanilla JavaScript (medium.com)
Oct 15, 2018
Or how we can benefit from TypeScript to full extent, without having to write any TS in our codebase, by leveraging standard JSDoc type…
  • Martin Hochel
Using TypeScript with React Native (facebook.github.io)
May 07, 2018
Today, we're going to look at how to use TypeScript in React Native apps.
  • Ash Furrow
Why I gave Flow a shot after TypeScript (medium.com)
Sep 08, 2017
These are some of the sticking points that led me to give Flow a try, and although it’s still early, I’m liking what I see so far, and here’s why…
  • Ryan Johnson
Back To The Basics: Using React + Flow (medium.com)
Aug 29, 2017
Why does it make sense to use FlowType or TypeScript when working with JavaScript?
  • Ali Sharif
Even Better Support for React in Flow (medium.com)
Aug 16, 2017
It is time to rethink how Flow models React.
  • Caleb Meredith
Flow: Type Checking with Flow in React + Redux (robinwieruch.de)
Jun 21, 2016
The Flow: Type Checking with Flow in React + Redux tutorial will teach you how to use Flow in a React JS + Redux environment.

Video Guides & Talks

React.js TypeScript Conditional Props - Props that depend on other Props (youtube.com)
Mar 30, 2021
Conditional props are props that depend on other props values/types. In this video we will look into conditional properties while using react and TypeScript.
  • Bruno Antunes
Power Up React With TypeScript (with Ben Ilegbodu) (youtube.com)
Oct 09, 2020
Want to add autocomplete, better linting, and more to your reactjs apps? In this episode, Ben Ilegbodu teaches us how TypeScript powers up our React apps.
  • Jason Lengstorf
  • Ben Ilegbodu
React Typescript - Quiz (youtube.com)
Jul 07, 2020
Create a cool React Quiz with create-react-app and Typescript. You'll also learn how to use Styled-Components with React.
  • Thomas Weibenfalk
Validating React component props with prop-types (youtube.com)
Feb 19, 2020
Learn how to improve your React components by validating props with prop-types.
  • Karl Hadwen
Type-level Programming ƒun in TypeScript (youtube.com)
Oct 03, 2019
In this talk we will see together what type-level programming is, and how to introduce it in our codebase helps us to reach more exact type definitions, thus reducing the bugs in our code. Starting from a practical example we will see the basic patterns, limits and potential.
  • Mattia Manzati
Convert a React Native Project to Typescript in 10 Minutes (youtube.com)
Sep 21, 2019
This talk will show you all the steps involved in converting a React Native project to TypeScript, as well as many of the pitfalls and gotchas that you might encounter along the way.
  • Alex Hinson
React Typescript Tutorial (youtube.com)
Sep 05, 2019
Learn how to start using Typescript in your React code. I go over props, hooks, and render props.
A Hitchhiker’s Guide to the new ReasonReact (youtube.com)
May 28, 2019
ReasonReact recently got a major overhaul. In this talk we explore the next version writing blazing fast, statically typed components using React Hooks. Once thrilled we add a little bit of genType’s magic on top of it, in order to compile our components to TypeScript, Flow or untyped JavaScript.
Scalable Design Systems with TypeScript (youtube.com)
May 01, 2019
This session explores creating living documentation for design systems, ensuring consistent documentation at all times using TypeScript.
  • Tejas Kumar
All aboard the type train (youtube.com)
May 01, 2019
JavaScript is a language of add-ons, and one of its more recent trends is typing. There are obvious benefits to typing, but what are the drawbacks? Should you choose Flow or TypeScript? Why use types at all? And why not just go straight to Reason? This session will provide some insight into these questions, peppered with examples from the real world.
  • Kadi Kraman
TypeScript + React (youtube.com)
Apr 29, 2019
This talk will provide a brief summary of the world of typed languages, an overview of TypeScript's features, as well as deeper dives into how TypeScript integrates with the world of React.
  • Chris Toomey
TypeScript and React (youtube.com)
Apr 08, 2019
Today we build on everything that we've learned about TypeScript and use it to...work with React and TypeScript!
  • Harry Wolff
Type Systems & Props Design - Exploring PropTypes, TypeScript, Flow & Reason (youtube.com)
Jan 07, 2019
Badly designed props can lead to components that are frustrating to use. While there are a couple patterns to make components more pleasant to use, ultimately it needs a type system in combination with a good editor integration for an even better developer experience. Yet not all type systems are the same. They offer different features and therefore lead to different experiences.
Gatsby & TypeScript (youtube.com)
Dec 01, 2018
Learn how to set up Gatsby with TypeScript and how to replace PropTypes with TypeScript interfaces in both functional and class based components.
How to use TypeScript in React (youtube.com)
Sep 20, 2018
TypeScript can be helpful to React developers in a lot of ways. Learn how to use Typescript in React.
Introduction to TypeScript @ ReactNYC (youtube.com)
Aug 31, 2018
Language overview by Microsoft Program Manager of TypeScript.
  • Daniel Rosenwasser
Prop validations for React (youtube.com)
May 22, 2018
You might think you know everything about prop-types, watch the the 3rd use-case ;)
Flow vs TypeScript in React :  my two cents (youtube.com)
May 18, 2018
Should you use Flow or TypeScript in your next React project? I recently had a bit of a dilemma with it for a new project and I would like to share my experience with it.

Books & Guides

Learn React with TypeScript 3 (packtpub.com)Get it on Amazon
Nov 29, 2018
Start developing modern day component based web apps using React 16, Redux and TypeScript 3 with this easy to follow guide.
  • Carl Rippon

Courses & Video Series

React and TypeScript (frontendmasters.com)
May 25, 2021
Learn to use TypeScript with React through building a series of React components. You’ll explore the types that come with React that allow you to infer the properties of your components, look at tips and advice for migrating your application from JavaScript to TypeScript, and learn advanced patterns for building flexible and type-safe components.
Using TypeScript with React (educative.io)
Apr 21, 2020
In this course, you will learn how to utilize TypeScript’s sophisticated type system to make React development faster and your code more readable. You will learn how to create component props, state, and events that are strongly-typed, allowing you to quickly understand what you can pass and helping you avoid mistakes.
  • Carl Rippon
React & TypeScript For Everyone (leveluptutorials.com)
Jan 03, 2020
React & TypeScript for Everyone will give you a firm grasp of the fundamentals and set you up for success every single time. Along the way, we'll go over plenty of examples to boost your confidence and expand your skillset.
Intermediate React, v2 (frontendmasters.com)
Jun 11, 2019
Learn to build scalable React applications using the latest tools and techniques available in the React ecosystem! This is a modular course where you can pick and choose the various pieces of the react ecosystem you want to learn.
Develop React Applications with Mobx and TypeScript (egghead.io)
Jan 09, 2019
In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications.
  • Basarat Ali Syed
Intermediate React (frontendmasters.com)
Sep 14, 2018
Learn to build scalable React applications using the tools and techniques available in the React ecosystem
Use TypeScript to develop React Applications (egghead.io)
Dec 12, 2017
In this course we will cover how to setup a React application with TypeScript and use TypeScirpt for React applications
  • Basarat Ali Syed
React: Testing and Debugging (lynda.com)
Jul 05, 2017
Learn how to test, debug, and optimize your React code with tools like Jest, Chrome, ESLint, and flow.

Podcast Episodes

Daria Caraway on Building Considerate React Component APIs with TypeScript (reactpodcast.com)
Feb 06, 2020
Today we chat with Daria Caraway and learn how to build considerate React components with TypeScript.
TypeScript and ReasonML Christoffer Niska (devchat.tv)
Aug 06, 2019
The panel discusses the affect learning another language has on how you write the code you’re working on. They talk about TypeScript and Christoffer shares how he got into it.
Be Super with TypeScript and Jared Palmer (reactpodcast.com)
Mar 28, 2019
On the when, where, what, why, and how much of TypeScript in React.

Libraries

flow-bin (flow.org)18943
v0.105.1
Aug 11, 2019
Adds static typing to JavaScript to improve developer productivity and code quality
typescript (typescriptlang.org)46564
v3.4.3
Apr 10, 2019
TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host, on any OS.
  • Anders Hejlsberg
  • Andy Hanson
  • Daniel Rosenwasser
  • Sheetal Nandi
  • Sheetal Nandi
  • Microsoft
reason-react (reasonml.github.io)2160
v0.7.0
Apr 10, 2019
Reason bindings for ReactJS
  • Cheng Lou
prop-types (github.com)2706
v15.7.2
Feb 14, 2019
Runtime type checking for React props and similar objects