React+TypeScript-Cheatsheets
Cheatsheets for experienced React developers getting started with TypeScript

 

React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

Basic | Advanced | Migrating | HOC | 中文翻译 | Contribute! | Ask!


???? This repo is maintained by @swyx@ferdaber and @IslamAttrash, we’re so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue! ????


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

Prerequisites

  1. good understanding of React
  2. familiarity with TypeScript Types (2ality’s guide is helpful)
  3. 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 <details> tags.

React + TypeScript Starter Kits

  1. Create React App v2.1+ with Typescriptnpx create-react-app my-new-react-typescript-app --typescript
  1. Basarat’s guide for manual setup of React + TypeScript + Webpack + Babel

Import React

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';

 

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.