diff --git a/README.md b/README.md index 7fe48dec..2096ee0a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# React+TypeScript Cheatsheets +# React TypeScript Cheatsheet -Cheatsheets for experienced React developers getting started with TypeScript +Cheatsheet for using React with TypeScript. --- @@ -15,18 +15,14 @@ Cheatsheets for experienced React developers getting started with TypeScript [**Web docs**](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup) | -[**Español**](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet-es) | -[**Português**](https://github.com/typescript-cheatsheets/react-pt) | [Contribute!](https://github.com/typescript-cheatsheets/react/blob/main/CONTRIBUTING.md) | [Ask!](https://github.com/typescript-cheatsheets/react/issues/new/choose) -:wave: This repo is maintained by [@swyx](https://twitter.com/swyx), [@eps1lon](https://twitter.com/sebsilbermann) and [@filiptammergard](https://twitter.com/tammergard). We're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please [file an issue](https://github.com/typescript-cheatsheets/react/issues/new/choose)! :+1: +:wave: This repo is maintained by [@eps1lon](https://twitter.com/sebsilbermann) and [@filiptammergard](https://twitter.com/tammergard). We're so happy you want to try out React with TypeScript! If you see anything wrong or missing, please [file an issue](https://github.com/typescript-cheatsheets/react/issues/new/choose)! :+1: --- -[![All Contributors](https://img.shields.io/github/contributors/typescript-cheatsheets/react-typescript-cheatsheet?color=orange&style=flat-square)](/CONTRIBUTORS.md) | [![Discord](https://img.shields.io/discord/508357248330760243.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/wTGS5z9) | [![Tweet](https://img.shields.io/twitter/url?label=Help%20spread%20the%20word%21&style=social&url=https%3A%2F%2Fgithub.com%2Ftypescript-cheatsheets%2Freact)](http://twitter.com/home?status=Awesome%20%40Reactjs%20%2B%20%40TypeScript%20cheatsheet%20by%20%40ferdaber%2C%20%40sebsilbermann%2C%20%40swyx%20%26%20others!%20https%3A%2F%2Fgithub.com%2Ftypescript-cheatsheets%2Freact) - -## All React + TypeScript Cheatsheets +[![All Contributors](https://img.shields.io/github/contributors/typescript-cheatsheets/react-typescript-cheatsheet?color=orange&style=flat-square)](/CONTRIBUTORS.md) | [![Discord](https://img.shields.io/discord/508357248330760243.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/wTGS5z9) - [The Basic Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/setup) is focused on helping React devs just start using TS in React **apps** - Focus on opinionated best practices, copy+pastable examples. @@ -55,90 +51,97 @@ Cheatsheets for experienced React developers getting started with TypeScript Expand Table of Contents -- [Section 1: Setup TypeScript with React](#section-1-setup-typescript-with-react) - - - [Prerequisites](#prerequisites) - - [React and TypeScript starter kits](#react-and-typescript-starter-kits) - - [Try React and TypeScript online](#try-react-and-typescript-online) -- [Section 2: Getting Started](#section-2-getting-started) - - [Function Components](#function-components) - - [Hooks](#hooks) - - [useState](#usestate) - - [useReducer](#usereducer) - - [useEffect / useLayoutEffect](#useeffect--uselayouteffect) - - [useRef](#useref) - - [Option 1: DOM element ref](#option-1-dom-element-ref) - - [Option 2: Mutable value ref](#option-2-mutable-value-ref) - - [See also](#see-also) - - [useImperativeHandle](#useimperativehandle) - - [Custom Hooks](#custom-hooks) - - [More Hooks + TypeScript reading:](#more-hooks--typescript-reading) - - [Example React Hooks + TypeScript Libraries:](#example-react-hooks--typescript-libraries) - - [Class Components](#class-components) - - [Typing getDerivedStateFromProps](#typing-getderivedstatefromprops) - - [You May Not Need `defaultProps`](#you-may-not-need-defaultprops) - - [Typing `defaultProps`](#typing-defaultprops) - - [Consuming Props of a Component with defaultProps](#consuming-props-of-a-component-with-defaultprops) - - [Problem Statement](#problem-statement) - - [Solution](#solution) - - [Misc Discussions and Knowledge](#misc-discussions-and-knowledge) - - [Typing Component Props](#typing-component-props) - - [Basic Prop Types Examples](#basic-prop-types-examples) - - [Useful React Prop Type Examples](#useful-react-prop-type-examples) - - [Types or Interfaces?](#types-or-interfaces) - - [TL;DR](#tldr) - - [More Advice](#more-advice) - - [Useful table for Types vs Interfaces](#useful-table-for-types-vs-interfaces) -- [getDerivedStateFromProps](#getderivedstatefromprops) -- [Forms and Events](#forms-and-events) -- [List of event types](#list-of-event-types) -- [Context](#context) -- [Basic Example](#basic-example) -- [Extended Example](#extended-example) -- [forwardRef/createRef](#forwardrefcreateref) -- [Generic forwardRefs](#generic-forwardrefs) -- [Option 1 - Wrapper component](#option-1---wrapper-component) -- [Option 2 - Redeclare forwardRef](#option-2---redeclare-forwardref) -- [More Info](#more-info) -- [Portals](#portals) -- [Error Boundaries](#error-boundaries) -- [Option 1: Using react-error-boundary](#option-1-using-react-error-boundary) -- [Options 2: Writing your custom error boundary component](#options-2-writing-your-custom-error-boundary-component) -- [Concurrent React/React Suspense](#concurrent-reactreact-suspense) -- [Troubleshooting Handbook: Types](#troubleshooting-handbook-types) - - - [Union Types and Type Guarding](#union-types-and-type-guarding) - - [Optional Types](#optional-types) - - [Enum Types](#enum-types) - - [Type Assertion](#type-assertion) - - [Simulating Nominal Types](#simulating-nominal-types) - - [Intersection Types](#intersection-types) - - [Union Types](#union-types) - - [Overloading Function Types](#overloading-function-types) - - [Using Inferred Types](#using-inferred-types) - - [Using Partial Types](#using-partial-types) - - [The Types I need weren't exported!](#the-types-i-need-werent-exported) - - [The Types I need don't exist!](#the-types-i-need-dont-exist) - - [Slapping `any` on everything](#slapping-any-on-everything) - - [Autogenerate types](#autogenerate-types) - - [Typing Exported Hooks](#typing-exported-hooks) - - [Typing Exported Components](#typing-exported-components) - - [Frequent Known Problems with TypeScript](#frequent-known-problems-with-typescript) - - [TypeScript doesn't narrow after an object element null check](#typescript-doesnt-narrow-after-an-object-element-null-check) - - [TypeScript doesn't let you restrict the type of children](#typescript-doesnt-let-you-restrict-the-type-of-children) -- [Troubleshooting Handbook: Operators](#troubleshooting-handbook-operators) -- [Troubleshooting Handbook: Utilities](#troubleshooting-handbook-utilities) -- [Troubleshooting Handbook: tsconfig.json](#troubleshooting-handbook-tsconfigjson) -- [Troubleshooting Handbook: Fixing bugs in official typings](#troubleshooting-handbook-fixing-bugs-in-official-typings) -- [Troubleshooting Handbook: Globals, Images and other non-TS files](#troubleshooting-handbook-globals-images-and-other-non-ts-files) -- [Editor Tooling and Integration](#editor-tooling-and-integration) -- [Linting](#linting) -- [Other React + TypeScript resources](#other-react--typescript-resources) -- [Recommended React + TypeScript talks](#recommended-react--typescript-talks) -- [Time to Really Learn TypeScript](#time-to-really-learn-typescript) -- [Example App](#example-app) - - +- [React TypeScript Cheatsheet](#react-typescript-cheatsheet) + - [Basic Cheatsheet](#basic-cheatsheet) + - [Basic Cheatsheet Table of Contents](#basic-cheatsheet-table-of-contents) + - [Section 1: Setup](#section-1-setup) + - [Prerequisites](#prerequisites) + - [React and TypeScript starter kits](#react-and-typescript-starter-kits) + - [Try React and TypeScript online](#try-react-and-typescript-online) + - [Section 2: Getting Started](#section-2-getting-started) + - [Function Components](#function-components) + - [Hooks](#hooks) + - [useState](#usestate) + - [useCallback](#usecallback) + - [useReducer](#usereducer) + - [useEffect / useLayoutEffect](#useeffect--uselayouteffect) + - [useRef](#useref) + - [Option 1: DOM element ref](#option-1-dom-element-ref) + - [Option 2: Mutable value ref](#option-2-mutable-value-ref) + - [See also](#see-also) + - [useImperativeHandle](#useimperativehandle) + - [See also:](#see-also-1) + - [Custom Hooks](#custom-hooks) + - [More Hooks + TypeScript reading:](#more-hooks--typescript-reading) + - [Example React Hooks + TypeScript Libraries:](#example-react-hooks--typescript-libraries) + - [Class Components](#class-components) + - [Typing getDerivedStateFromProps](#typing-getderivedstatefromprops) + - [You May Not Need `defaultProps`](#you-may-not-need-defaultprops) + - [Typing `defaultProps`](#typing-defaultprops) + - [Consuming Props of a Component with defaultProps](#consuming-props-of-a-component-with-defaultprops) + - [Problem Statement](#problem-statement) + - [Solution](#solution) + - [Misc Discussions and Knowledge](#misc-discussions-and-knowledge) + - [Typing Component Props](#typing-component-props) + - [Basic Prop Types Examples](#basic-prop-types-examples) + - [`object` as the non-primitive type](#object-as-the-non-primitive-type) + - [Empty interface, `{}` and `Object`](#empty-interface--and-object) + - [Useful React Prop Type Examples](#useful-react-prop-type-examples) + - [Types or Interfaces?](#types-or-interfaces) + - [TL;DR](#tldr) + - [More Advice](#more-advice) + - [Useful table for Types vs Interfaces](#useful-table-for-types-vs-interfaces) + - [getDerivedStateFromProps](#getderivedstatefromprops) + - [Forms and Events](#forms-and-events) + - [List of event types](#list-of-event-types) + - [Context](#context) + - [Basic example](#basic-example) + - [Without default context value](#without-default-context-value) + - [Type assertion as an alternative](#type-assertion-as-an-alternative) + - [forwardRef/createRef](#forwardrefcreateref) + - [Generic forwardRefs](#generic-forwardrefs) + - [Option 1 - Wrapper component](#option-1---wrapper-component) + - [Option 2 - Redeclare forwardRef](#option-2---redeclare-forwardref) + - [Option 3 - Call signature](#option-3---call-signature) + - [More Info](#more-info) + - [Portals](#portals) + - [Error Boundaries](#error-boundaries) + - [Option 1: Using react-error-boundary](#option-1-using-react-error-boundary) + - [Option 2: Writing your custom error boundary component](#option-2-writing-your-custom-error-boundary-component) + - [Concurrent React/React Suspense](#concurrent-reactreact-suspense) + - [Troubleshooting Handbook: Types](#troubleshooting-handbook-types) + - [Union Types and Type Guarding](#union-types-and-type-guarding) + - [Optional Types](#optional-types) + - [Enum Types](#enum-types) + - [Type Assertion](#type-assertion) + - [Simulating Nominal Types](#simulating-nominal-types) + - [Intersection Types](#intersection-types) + - [Union Types](#union-types) + - [Overloading Function Types](#overloading-function-types) + - [Using Inferred Types](#using-inferred-types) + - [Using Partial Types](#using-partial-types) + - [The Types I need weren't exported!](#the-types-i-need-werent-exported) + - [The Types I need don't exist!](#the-types-i-need-dont-exist) + - [Slapping `any` on everything](#slapping-any-on-everything) + - [Autogenerate types](#autogenerate-types) + - [Typing Exported Hooks](#typing-exported-hooks) + - [Typing Exported Components](#typing-exported-components) + - [Frequent Known Problems with TypeScript](#frequent-known-problems-with-typescript) + - [TypeScript doesn't narrow after an object element null check](#typescript-doesnt-narrow-after-an-object-element-null-check) + - [TypeScript doesn't let you restrict the type of children](#typescript-doesnt-let-you-restrict-the-type-of-children) + - [Troubleshooting Handbook: Operators](#troubleshooting-handbook-operators) + - [Troubleshooting Handbook: Utilities](#troubleshooting-handbook-utilities) + - [Troubleshooting Handbook: tsconfig.json](#troubleshooting-handbook-tsconfigjson) + - [Troubleshooting Handbook: Fixing bugs in official typings](#troubleshooting-handbook-fixing-bugs-in-official-typings) + - [Troubleshooting Handbook: Globals, Images and other non-TS files](#troubleshooting-handbook-globals-images-and-other-non-ts-files) + - [Editor Tooling and Integration](#editor-tooling-and-integration) + - [Linting](#linting) + - [Other React + TypeScript resources](#other-react--typescript-resources) + - [Recommended React + TypeScript talks](#recommended-react--typescript-talks) + - [Time to Really Learn TypeScript](#time-to-really-learn-typescript) + - [Example App](#example-app) + - [My question isn't answered here!](#my-question-isnt-answered-here) + - [Contributors](#contributors) @@ -505,7 +508,7 @@ Note that you are opting out of type safety here - you will have a runtime error
Tip: Choosing which HTMLElement to use - + Refs demand specificity - it is not enough to just specify any old `HTMLElement`. If you don't know the name of the element type you need, you can check [lib.dom.ts](https://github.com/microsoft/TypeScript/blob/v3.9.5/lib/lib.dom.d.ts#L19224-L19343) or make an intentional type error and let the language service tell you: ![image](https://user-images.githubusercontent.com/6764957/116914284-1c436380-ac7d-11eb-9150-f52c571c5f07.png)