Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output. More info

Articles & Tutorials

Using styled-components in TypeScript: A tutorial with examples (blog.logrocket.com)
Jun 10, 2021
In this tutorial, we’ll show you how to build and style a TypeScript app using styled-components.
  • Hafsah Emekoma
How to use TypeScript with React 18 alpha (blog.logrocket.com)
Jun 09, 2021
React 18 alpha has been released, which is very exciting! But can we use it with TypeScript?
  • John Reilly
How to write a React Component in TypeScript (kentcdodds.com)
Mar 04, 2021
There are plenty of ways to do it, here's how I recommend typing React Components.
A TypeScript trick for reusable hooks (swizec.com)
Feb 19, 2021
How do you write a reusable React hook? Oh that's easy, every hook is reusable!
React and TypeScript: How to find the right event type (felixgerschau.com)
Feb 13, 2021
JavaScript in the browser already includes a series of HTML events to which JavaScript can listen and react. The most used ones are events like onclick, or onchange, for instance.
  • Felix Gerschau
How TypeScript helps you build better React apps (felixgerschau.com)
Feb 05, 2021
In this guide, I want to teach you everything you need to know about using React with TypeScript. Over the next weeks, I'll publish new articles to this guide, so if you want to get notified about my latest content, make sure to subscribe to my newsletter.
  • Felix Gerschau
Wrapping React.useState with TypeScript (kentcdodds.com)
Jan 22, 2021
How to make a custom hook that wraps useState with TypeScript properly.
How to create React components with TypeScript (felixgerschau.com)
Jan 17, 2021
I want to take this fear from you by showing how you can easily define your React components with TypeScript in this article.
  • Felix Gerschau
Getting started with React and TypeScript (felixgerschau.com)
Jan 17, 2021
In this article, I'll first explain how to configure TypeScript with the tsconfig file. Afterward, we'll see how to set up an entire project using Webpack or Create React App.
  • Felix Gerschau
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
5 Reasons to Use TypeScript with React (blog.bitsrc.io)
Nov 03, 2020
Know the benefits you can gain by using TypeScript with React
  • Dilantha Prasanjith
How to Use Redux in Your React TypeScript App (freecodecamp.org)
Sep 08, 2020
In this guide, I will show you how to use Redux in your React TypeScript project by building an app that allows you to add, delete, and show articles.
  • 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
Working with React Hooks and TypeScript (toptal.com)
Apr 08, 2020
Hooks were introduced to React in February 2019 to improve code readability. We already discussed React hooks in previous articles, but this time we are examining how hooks work with TypeScript.
  • Nicolas Zozol
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
Code splitting React components with TypeScript and NO Babel (blog.logrocket.com)
Mar 12, 2020
With the advent of the now-infamous single page application, extreme amounts of JavaScript started getting pushed to the browser. The sheer weight of JavaScript is one problem, but the browser also has to parse the downloaded JavaScript.
  • Paul Cowan
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
Building a full mobile app with TypeScript, Ionic, React, and MobX (blog.logrocket.com)
Dec 18, 2019
In this post, I will walk you through building a mood tracker app with TypeScript, Ionic, React, and MobX. We will then make it publicly accessible by deploying the app on Netlify.
  • Foysal Ahamed
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
Sharing Code between React Web / Native TypeScript Projects (codeburst.io)
Nov 27, 2019
Say we are working on a React Web and React Native project with overlapping functionality. We write some common code that we want to share between them, e.g., custom React Hooks. We don’t want to use the “copy-and-paste” method of sharing code; too error-prone. We want something that behaves like our projects’ other libraries, i.e., behaves like a npm library.
  • John Tucker
Getting Started with Electron, Typescript, React and Webpack (sitepen.com)
Sep 17, 2019
Here we will explore an opinionated approach to setting up Electron: TypeScript, React and Webpack. We’ll start with a basic Electron project and progressively build it into an enterprise-ready solution.
  • Justin Ellison
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
How to set up a TypeScript + Gatsby app (blog.logrocket.com)
Aug 14, 2019
In this article, we’ll take one of the starter Gatsby projects and turn it into a TypeScript app.
  • Yomi Eluwande
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
7 Tips of Next.js 9 with TypeScript (axross.dev)
Aug 02, 2019
Recently I needed to research how good Next.js 9 is and I made this website using it in order to go over. Here is tips what I run into throughout making this website.
  • Kohei Asai
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
Build a GraphQL + React app with TypeScript (blog.logrocket.com)
Jun 09, 2019
This article walks you through building a client-side application with React and Apollo using the public SpaceX GraphQL API to display information about launches. We will automatically generate TypeScript types for our queries and execute these queries using React Hooks.
  • Trey Huffine
Building a Static Gatsby-based Website with TypeScript (jeffrafter.com)
May 25, 2019
Gatsby is, in many ways, the JavaScript successor to Jekyll. I’ve upgraded several sites to Gatsby (including this one) finding a way to integrate TypeScript as part of the journey.
  • Jeff Rafter
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.
Setting up a GatsbyJS starter with TypeScript, ESLint, Prettier and pre-commit hooks (dev.to)
Feb 24, 2019
In this article, we'll set up the Gatsby default starter blog with TypeScript, ESLint, Prettier and run these before every commit with lint-staged and husky.
  • Arden de Raaij
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
Getting Started with React TypeScript and Webpack (dev.to)
Feb 08, 2019
Here's my take on a starter project using React, TypeScript and Webpack.
  • Grant Bartlett
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
Creating a Static Site using Next.js and TypeScript (medium.com)
Dec 19, 2018
My goal here is to document the steps required to create a static site rendered using next and TypeScript. I'm specifically interested in a configuration that uses the export functionality of next to produce what is basically a static, server-side rendered web site that integrates dynamic functionality once loaded. If that interests you as well, read on.
  • Michael Tiller
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
Clever React context tricks using Typescript — not Redux (medium.freecodecamp.org)
Nov 12, 2018
Leverage React’s Context API as a light and powerful alternative to Redux
  • Bill Girten
Setup your own Webpack 4 config for React with Typescript (sevketyalcin.com)
Jul 31, 2018
In this tutorial, we are going to setup our own basic Webpack 4 configuration from scratch for React with Typescript.
  • Sevket Yalcin
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
Ultimate React Component Patterns with Typescript 2.8 (levelup.gitconnected.com)
Feb 28, 2018
Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components
  • Martin Hochel
Accessible Web Apps with React, TypeScript, and AllyJS (css-tricks.com)
Nov 16, 2017
This article will focus on Ally.js, a library simplifying certain accessibility features, functions, and behaviors.
  • Daniel Yuschick
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

Video Guides & Talks

Refactoring a React app with Typescript (youtube.com)
May 13, 2021
Treehouse Alum & Engineer 2 at Mailchimp, Myles Young, will teach you about the benefits of incorporating Typescript into your React Projects.
  • Myles Young
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
Build a Shopping Cart with React and TypeScript (youtube.com)
Jan 21, 2021
Learn the fundamentals and how to build a ReactJS shopping cart with Typescript, Material UI, Styled Components and React-Query.
  • Thomas Weibenfalk
Live Coding a Full Stack Serverless App with Next.js, Amazon Aurora Serverless, CDK, & TypeScript (youtube.com)
Nov 17, 2020
In this video we start from scratch, building out a serverless AWS back end using CDK, AWS Lambda, GraphQL on AWS AppSync, and Amazon Aurora Serverless PostgreSQL. We then wire up the API to a Next.js app using AWS Amplify and show how to connect to the API, build routes at build time, and enable fallback routes to dynamically generate routes at runtime.
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 Portal - Create a Modal popup with React and Typescript (youtube.com)
Aug 18, 2020
I show how to create a modal popup with React, Typescript and the NES.css library to spice things up.
  • Thomas Weibenfalk
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
Writing a Custom React Hook with TypeScript (youtube.com)
Jun 29, 2020
Last part of my 3 part series on writing custom React Hooks! This one converts the Hook to use TypeScript!
  • Harry Wolff
Local Storage | Custom React Hook with Typescript (youtube.com)
May 12, 2020
Create a custom and reusable React Hook for using Local Storage - useLocalStorage with Typescript in React. I'll show you, from scratch, how to use a custom hook in React to utilize localstorage for persisting data.
  • Thomas Weibenfalk
GraphQL Typescript Authentication Boilerplate (youtube.com)
Nov 25, 2019
I walkthrough and explain the GraphQL Typescript boilerplate I created that includes authentication via sessions.
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.
Convert a React Native Project to Typescript in 10 Minutes (youtube.com)
Jul 31, 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
Releasing a library written in TypeScript on NPM (youtube.com)
May 01, 2019
Most of us have used or at least heard about TypeScript, but how many have released a React library written in TypeScript on NPM? In this session we will take a look at the tooling required and some best practices for publishing a library using TypeScript and Rollup.
  • Christoffer Niska
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
React Typescript Material UI Form (youtube.com)
Apr 16, 2019
Learn how to make a form in React using Typescript, Material UI, and Formik.
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
React and TypeScript (youtube.com)
Jan 20, 2019
Talk at React Vienna 2018.
  • Dylan Schiemann
Nordic.js 2018 - Using TypeScript with Redux Architecture (youtube.com)
Dec 12, 2018
Functional reactive programming is based on the idea that applications can be built around streams. The structure TypeScript imposes provides us with a declarative syntax that gives semantic meaning to the streams of events and commands our application uses to build state in redux architecture.
  • Sandi Barr
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
Yarn workspace with Typescript React Native app (youtube.com)
Jun 10, 2018
Learn how to use Yarn workspaces with a Typescript React Native app.
How to setup a Typescript React Native App (youtube.com)
Jun 08, 2018
Learn how to setup a React Native application with Typescript.
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.
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL (newline.co)
Nov 13, 2019
Learn advanced React, Node, TypeScript, and GraphQL by building a production-ready application in this 8-week, online course.
  • Hassan Djirdeh
  • Jing Chen
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.
Typescript, Next.js, And GraphQL Series (youtube.com)
Jan 27, 2019
Learn how to setup a Next.js project with typescript.
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
Building a React Native App (youtube.com)
Sep 10, 2018
I'll be vlogging my experience of creating a brand new React Native app with Expo.
  • Harry Wolff
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

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.
Chris Toomey on TypeScript, GraphQL, and Product Thinking (reactpodcast.com)
Sep 19, 2019
This week we sit down with Chris Toomey and address all the holy wars: Elm vs React, TypeScript vs JavaScript, product vs development, and even VS Code vs Vim.
Learning React and TypeScript in Public with Shawn "swyx" Wang (devchat.tv)
Aug 13, 2019
Today’s guest Shawn Wang is a career changer starts off the show about how he got from finance to programming. The panel talks about how they each got started in programming. Shawn explains his Learn In Public manifesto. They discuss the benefits of learning in public and how concepts like Cunninham’s Law and lampshading can be a good thing.
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

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