Guide · Open source
How to use the React TypeScript Cheatsheet
Updated · written with AI from the project's own documentation and checked against our catalogue data
The React TypeScript Cheatsheet is a free, MIT-licensed reference that shows how to write React code with TypeScript. It is published as a website and a GitHub repository, and it covers setup, typing function and class components, hooks, props, events, context, refs and error boundaries. This guide explains how to find your way around it, how to set up a project, and which sections to use for common typing problems.
React TypeScript Cheatsheettypescript-cheatsheets/react · ★ 47.1k · MIT Install options & downloads Quick start
- 1Confirm your background. Check that you understand basic React and TypeScript types, since the cheatsheet assumes both.
- 2Open the web docs. Start at the Setup section of the web docs to see prerequisites and starter options.
- 3Create a project. Use one of the listed starter commands, such as the Vite react-ts template, to create a TypeScript project.
- 4Find your pattern. Use the table of contents to jump to the component, hook, or context section you need.
- 5Copy and adapt the example. Take the code example, then change the names and types to match your own components.
- 6Check the types. Use TypeScript in your editor so type errors show up as you edit your code.
Check whether the cheatsheet fits your level
The cheatsheet is written for readers who already know the basics. The README says you can use it for reference at any skill level, but that a basic understanding of React and TypeScript is assumed. It lists the prerequisites as a basic understanding of React and familiarity with TypeScript basics and everyday types.
It is a reference, not a course. It does not include exercises or a lesson sequence, so if you are a complete beginner you should learn React and TypeScript first.
- Good fit: React developers new to TypeScript who want copy-paste examples.
- Good fit: developers who know React and want typing patterns for hooks and props.
- Good fit: engineers writing reusable React and TypeScript libraries who need generic type patterns.
- Not a fit: complete beginners to React or TypeScript.
Set up a React and TypeScript project
The Setup section lists starter commands for several frameworks. If you want a client-side single-page app without a framework, the README points to Vite as the most common choice and gives a Vite command with the react-ts template.
Pick one starter that matches your project. The commands below are the ones listed in the README.
- Next.js, with the TypeScript flag as listed in the README.
- Remix, using its create command.
- Gatsby, using npm init with the TypeScript flag.
- Expo, using the with-typescript template.
- Vite, using the react-ts template for a single-page app.
npm create vite@latest my-app -- --template react-tsType function components and props
Function components are written as normal functions that take a props argument and return a JSX element. The cheatsheet shows several ways to declare the prop types: a named type, an inline type, or React.FunctionComponent and React.FC. The Function Components section notes that the return type is inferred, and that annotating it makes TypeScript raise an error if you return something else.
The Typing Component Props section covers the basic prop types and some useful React prop type examples. It also explains when to use types and when to use interfaces, with a short summary and a comparison table.
type AppProps = {
message: string;
};Type hooks, refs and class components
The Hooks section has entries for useState, useCallback, useReducer, useEffect and useLayoutEffect, useRef, useImperativeHandle and custom hooks. Use the section that matches the hook you are writing, and follow the links to more hook and TypeScript reading.
The useRef entry separates two cases: a ref to a DOM element and a ref to a mutable value. Class components have their own section, which covers typing getDerivedStateFromProps and defaultProps.
- useRef: DOM element ref (Option 1) or mutable value ref (Option 2).
- useImperativeHandle: has its own entry with related reading.
- Class components: typing getDerivedStateFromProps and defaultProps.
Handle events, context, refs and errors
The Forms and Events section includes a list of event types. The Context section has a basic example and shows how to work without a default context value, with a type assertion as an alternative.
For refs across components, the cheatsheet covers forwardRef and createRef, plus generic forwardRefs with three options. Error Boundaries offers two options: using the react-error-boundary package, or writing your own error boundary component.
- Forms and Events: list of event types.
- Context: basic example, and a version without a default value.
- forwardRef and createRef, including generic forwardRefs.
- Portals and Error Boundaries.
- Concurrent React and Suspense.
Read it online or clone the repository
The easiest way to use the cheatsheet is to open the web docs. If you want the source files, the README gives a git clone command for the repository. The README does not list any other prerequisites for reading the cheatsheet.
If you find something wrong or missing, the README asks you to file an issue. The README also links to a contributing guide.
git clone https://github.com/typescript-cheatsheets/reactWhat people use it for
- Typing props for a function component that receives a message string.
- Choosing between useRef for a DOM element and useRef for a mutable value.
- Typing context that has no default value, or using a type assertion instead.
- Writing a generic forwardRef component for a reusable library.
- Adding an error boundary using react-error-boundary or a custom component.
Frequently asked questions
Is the React TypeScript Cheatsheet free?
Yes. The project is licensed under the MIT licence and its source is on GitHub. The README describes it as a website and a GitHub repository.
What do I need before I use it?
The README says basic understanding of React and TypeScript is assumed. It lists a basic understanding of React and familiarity with TypeScript basics and everyday types as prerequisites.
How do I install the cheatsheet?
You do not install it as a program. Read it online at the web docs, or clone the repository with git clone https://github.com/typescript-cheatsheets/react if you want the files.
Is this a tutorial for beginners?
No. The README describes it as a reference, and it does not include exercises or a step-by-step course. Learn React and TypeScript basics first, then use the cheatsheet for typing patterns.
What are alternatives to this cheatsheet?
The source lists the TypeScript Handbook, the React documentation, and other react-typescript-cheatsheet alternatives on DefinitelyTyped. The Handbook covers TypeScript itself, and the React documentation covers React.
Where do I report a problem with the examples?
The README asks readers to file an issue on GitHub if they see anything wrong or missing. It links to the issue form in the repository.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this cheatsheet if you already know React and want opinionated, copy-paste TypeScript patterns for components, hooks, props and events. Pick the TypeScript Handbook or the React documentation instead if you are a beginner or need a step-by-step course with exercises.
Install options & downloads