Cheatsheets for experienced React developers getting started with TypeScript
All React + TypeScript Cheatsheets
- The Basic Cheatsheet (
/README.md) is focused on helping React devs just start using TS in React apps
- focus on opinionated best practices, copy+pastable examples
- explains some basic TS types usage and setup along the way
- answers the most Frequently Asked Questions
- does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning too much TS.
- The Advanced Cheatsheet (
/ADVANCED.md) helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React libraries.
- It also has miscellaneous tips and tricks for pro users.
- Advice for contributing to DefinitelyTyped
- The goal is to take full advantage of TypeScript.
- The Migrating Cheatsheet (
/MIGRATING.md) helps collate advice for incrementally migrating large codebases from JS or Flow, from people who have done it.
- We do not try to convince people to switch, only to help people who have already decided
- ⚠️This is a new cheatsheet, all assistance is welcome
- The HOC Cheatsheet (
/HOC.md) specifically teaches people to write HOCs with examples.
- Familiarity with Generics is necessary.
- ⚠️This is the newest cheatsheet, all assistance is welcome
Basic Cheatsheet Table of Contents
Expand Table of Contents
Section 1: Setup
- good understanding of React
- familiarity with TypeScript Types (2ality’s guide is helpful)
- having read the TypeScript section in the official React docs.
This guide will always assume you are starting with the latest TypeScript version. Notes for older versions will be in expandable
React + TypeScript Starter Kits
- Create React App v2.1+ with Typescript:
npx create-react-app my-new-react-typescript-app --typescript
- We used to recommend
create-react-app-typescriptbut it is now deprecated. see migration instructions
- Basarat’s guide for manual setup of React + TypeScript + Webpack + Babel
- In particular, make sure that you have
@types/react-dominstalled (Read more about the DefinitelyTyped project if you are unfamiliar)
- There are also many React + TypeScript boilerplates, please see our Resources list below.
import * as React from 'react'; import * as ReactDOM from 'react-dom';
In TypeScript 2.7+, you can run TypeScript with
--allowSyntheticDefaultImports (or add
"allowSyntheticDefaultImports": true to tsconfig) to import like in regular jsx:
import React from 'react'; import ReactDOM from 'react-dom';