React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

Web docs | 中文翻译 | Español | Contribute! | Ask!

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…

React TypeScript kickstart

This the source for a guide for kickstarting a new React project with preconfigured Redux, TypeScript, Storybook and testing - all powered by docusaurus. If you find errors, inconsistencies or want to contribute: Feel free to submit issues & pull requests.

Prerequisites

These tools are needed to start developing.

# node version management
brew install nvm

# node (latest lts version)
nvm install --lts

# yarn
brew install yarn --without-node

Editor

We recommend to use VSCode as editor. Install the following Extensions:

• TSLint -> linting support directly in editor (marketplace)
• Type safe React & Redux Snippets in TypeScript -> Snippets for boilerplate code as shown in Cookbook (marketplace)

Cookbook

In the cookbook you will find skeletons for important modules. These skeletons are also available for VSCode as snippets in the VSCode marketplace.

Example (Component with defaultProps)

Look, Ma' - Intellisense!