1- # React+ TypeScript Cheatsheets
1+ # React TypeScript Cheatsheet
22
3- Cheatsheets for experienced React developers getting started with TypeScript
3+ Cheatsheet for using React with TypeScript.
44
55---
66
@@ -15,18 +15,14 @@ Cheatsheets for experienced React developers getting started with TypeScript
1515</a >
1616
1717[ ** Web docs** ] ( https://react-typescript-cheatsheet.netlify.app/docs/basic/setup ) |
18- [ ** Español** ] ( https://github.com/typescript-cheatsheets/react-typescript-cheatsheet-es ) |
19- [ ** Português** ] ( https://github.com/typescript-cheatsheets/react-pt ) |
2018[ Contribute!] ( https://github.com/typescript-cheatsheets/react/blob/main/CONTRIBUTING.md ) |
2119[ Ask!] ( https://github.com/typescript-cheatsheets/react/issues/new/choose )
2220
23- :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 :
21+ :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 :
2422
2523---
2624
27- [ ![ 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 )
28-
29- ## All React + TypeScript Cheatsheets
25+ [ ![ 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 )
3026
3127- [ 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**
3228 - Focus on opinionated best practices, copy+pastable examples.
@@ -55,90 +51,97 @@ Cheatsheets for experienced React developers getting started with TypeScript
5551
5652<summary ><b >Expand Table of Contents</b ></summary >
5753
58- - [ Section 1: Setup TypeScript with React] ( #section-1-setup-typescript-with-react )
59- <!-- START-SECTION:setup-toc-->
60- - [ Prerequisites] ( #prerequisites )
61- - [ React and TypeScript starter kits] ( #react-and-typescript-starter-kits )
62- - [ Try React and TypeScript online] ( #try-react-and-typescript-online ) <!-- END-SECTION:setup-toc-->
63- - [ Section 2: Getting Started] ( #section-2-getting-started )
64- - [ Function Components] ( #function-components )
65- - [ Hooks] ( #hooks )
66- - [ useState] ( #usestate )
67- - [ useReducer] ( #usereducer )
68- - [ useEffect / useLayoutEffect] ( #useeffect--uselayouteffect )
69- - [ useRef] ( #useref )
70- - [ Option 1: DOM element ref] ( #option-1-dom-element-ref )
71- - [ Option 2: Mutable value ref] ( #option-2-mutable-value-ref )
72- - [ See also] ( #see-also )
73- - [ useImperativeHandle] ( #useimperativehandle )
74- - [ Custom Hooks] ( #custom-hooks )
75- - [ More Hooks + TypeScript reading:] ( #more-hooks--typescript-reading )
76- - [ Example React Hooks + TypeScript Libraries:] ( #example-react-hooks--typescript-libraries )
77- - [ Class Components] ( #class-components )
78- - [ Typing getDerivedStateFromProps] ( #typing-getderivedstatefromprops )
79- - [ You May Not Need ` defaultProps ` ] ( #you-may-not-need-defaultprops )
80- - [ Typing ` defaultProps ` ] ( #typing-defaultprops )
81- - [ Consuming Props of a Component with defaultProps] ( #consuming-props-of-a-component-with-defaultprops )
82- - [ Problem Statement] ( #problem-statement )
83- - [ Solution] ( #solution )
84- - [ Misc Discussions and Knowledge] ( #misc-discussions-and-knowledge )
85- - [ Typing Component Props] ( #typing-component-props )
86- - [ Basic Prop Types Examples] ( #basic-prop-types-examples )
87- - [ Useful React Prop Type Examples] ( #useful-react-prop-type-examples )
88- - [ Types or Interfaces?] ( #types-or-interfaces )
89- - [ TL;DR] ( #tldr )
90- - [ More Advice] ( #more-advice )
91- - [ Useful table for Types vs Interfaces] ( #useful-table-for-types-vs-interfaces )
92- - [ getDerivedStateFromProps] ( #getderivedstatefromprops )
93- - [ Forms and Events] ( #forms-and-events )
94- - [ List of event types] ( #list-of-event-types )
95- - [ Context] ( #context )
96- - [ Basic Example] ( #basic-example )
97- - [ Extended Example] ( #extended-example )
98- - [ forwardRef/createRef] ( #forwardrefcreateref )
99- - [ Generic forwardRefs] ( #generic-forwardrefs )
100- - [ Option 1 - Wrapper component] ( #option-1---wrapper-component )
101- - [ Option 2 - Redeclare forwardRef] ( #option-2---redeclare-forwardref )
102- - [ More Info] ( #more-info )
103- - [ Portals] ( #portals )
104- - [ Error Boundaries] ( #error-boundaries )
105- - [ Option 1: Using react-error-boundary] ( #option-1-using-react-error-boundary )
106- - [ Options 2: Writing your custom error boundary component] ( #options-2-writing-your-custom-error-boundary-component )
107- - [ Concurrent React/React Suspense] ( #concurrent-reactreact-suspense )
108- - [ Troubleshooting Handbook: Types] ( #troubleshooting-handbook-types )
109- <!-- START-SECTION:types-toc-->
110- - [ Union Types and Type Guarding] ( #union-types-and-type-guarding )
111- - [ Optional Types] ( #optional-types )
112- - [ Enum Types] ( #enum-types )
113- - [ Type Assertion] ( #type-assertion )
114- - [ Simulating Nominal Types] ( #simulating-nominal-types )
115- - [ Intersection Types] ( #intersection-types )
116- - [ Union Types] ( #union-types )
117- - [ Overloading Function Types] ( #overloading-function-types )
118- - [ Using Inferred Types] ( #using-inferred-types )
119- - [ Using Partial Types] ( #using-partial-types )
120- - [ The Types I need weren't exported!] ( #the-types-i-need-werent-exported )
121- - [ The Types I need don't exist!] ( #the-types-i-need-dont-exist )
122- - [ Slapping ` any ` on everything] ( #slapping-any-on-everything )
123- - [ Autogenerate types] ( #autogenerate-types )
124- - [ Typing Exported Hooks] ( #typing-exported-hooks )
125- - [ Typing Exported Components] ( #typing-exported-components )
126- - [ Frequent Known Problems with TypeScript] ( #frequent-known-problems-with-typescript )
127- - [ TypeScript doesn't narrow after an object element null check] ( #typescript-doesnt-narrow-after-an-object-element-null-check )
128- - [ TypeScript doesn't let you restrict the type of children] ( #typescript-doesnt-let-you-restrict-the-type-of-children ) <!-- END-SECTION:types-toc-->
129- - [ Troubleshooting Handbook: Operators] ( #troubleshooting-handbook-operators )
130- - [ Troubleshooting Handbook: Utilities] ( #troubleshooting-handbook-utilities )
131- - [ Troubleshooting Handbook: tsconfig.json] ( #troubleshooting-handbook-tsconfigjson )
132- - [ Troubleshooting Handbook: Fixing bugs in official typings] ( #troubleshooting-handbook-fixing-bugs-in-official-typings )
133- - [ Troubleshooting Handbook: Globals, Images and other non-TS files] ( #troubleshooting-handbook-globals-images-and-other-non-ts-files )
134- - [ Editor Tooling and Integration] ( #editor-tooling-and-integration )
135- - [ Linting] ( #linting )
136- - [ Other React + TypeScript resources] ( #other-react--typescript-resources )
137- - [ Recommended React + TypeScript talks] ( #recommended-react--typescript-talks )
138- - [ Time to Really Learn TypeScript] ( #time-to-really-learn-typescript )
139- - [ Example App] ( #example-app )
140-
141- </details >
54+ - [ React TypeScript Cheatsheet] ( #react-typescript-cheatsheet )
55+ - [ Basic Cheatsheet] ( #basic-cheatsheet )
56+ - [ Basic Cheatsheet Table of Contents] ( #basic-cheatsheet-table-of-contents )
57+ - [ Section 1: Setup] ( #section-1-setup )
58+ - [ Prerequisites] ( #prerequisites )
59+ - [ React and TypeScript starter kits] ( #react-and-typescript-starter-kits )
60+ - [ Try React and TypeScript online] ( #try-react-and-typescript-online )
61+ - [ Section 2: Getting Started] ( #section-2-getting-started )
62+ - [ Function Components] ( #function-components )
63+ - [ Hooks] ( #hooks )
64+ - [ useState] ( #usestate )
65+ - [ useCallback] ( #usecallback )
66+ - [ useReducer] ( #usereducer )
67+ - [ useEffect / useLayoutEffect] ( #useeffect--uselayouteffect )
68+ - [ useRef] ( #useref )
69+ - [ Option 1: DOM element ref] ( #option-1-dom-element-ref )
70+ - [ Option 2: Mutable value ref] ( #option-2-mutable-value-ref )
71+ - [ See also] ( #see-also )
72+ - [ useImperativeHandle] ( #useimperativehandle )
73+ - [ See also:] ( #see-also-1 )
74+ - [ Custom Hooks] ( #custom-hooks )
75+ - [ More Hooks + TypeScript reading:] ( #more-hooks--typescript-reading )
76+ - [ Example React Hooks + TypeScript Libraries:] ( #example-react-hooks--typescript-libraries )
77+ - [ Class Components] ( #class-components )
78+ - [ Typing getDerivedStateFromProps] ( #typing-getderivedstatefromprops )
79+ - [ You May Not Need ` defaultProps ` ] ( #you-may-not-need-defaultprops )
80+ - [ Typing ` defaultProps ` ] ( #typing-defaultprops )
81+ - [ Consuming Props of a Component with defaultProps] ( #consuming-props-of-a-component-with-defaultprops )
82+ - [ Problem Statement] ( #problem-statement )
83+ - [ Solution] ( #solution )
84+ - [ Misc Discussions and Knowledge] ( #misc-discussions-and-knowledge )
85+ - [ Typing Component Props] ( #typing-component-props )
86+ - [ Basic Prop Types Examples] ( #basic-prop-types-examples )
87+ - [ ` object ` as the non-primitive type] ( #object-as-the-non-primitive-type )
88+ - [ Empty interface, ` {} ` and ` Object ` ] ( #empty-interface--and-object )
89+ - [ Useful React Prop Type Examples] ( #useful-react-prop-type-examples )
90+ - [ Types or Interfaces?] ( #types-or-interfaces )
91+ - [ TL;DR] ( #tldr )
92+ - [ More Advice] ( #more-advice )
93+ - [ Useful table for Types vs Interfaces] ( #useful-table-for-types-vs-interfaces )
94+ - [ getDerivedStateFromProps] ( #getderivedstatefromprops )
95+ - [ Forms and Events] ( #forms-and-events )
96+ - [ List of event types] ( #list-of-event-types )
97+ - [ Context] ( #context )
98+ - [ Basic example] ( #basic-example )
99+ - [ Without default context value] ( #without-default-context-value )
100+ - [ Type assertion as an alternative] ( #type-assertion-as-an-alternative )
101+ - [ forwardRef/createRef] ( #forwardrefcreateref )
102+ - [ Generic forwardRefs] ( #generic-forwardrefs )
103+ - [ Option 1 - Wrapper component] ( #option-1---wrapper-component )
104+ - [ Option 2 - Redeclare forwardRef] ( #option-2---redeclare-forwardref )
105+ - [ Option 3 - Call signature] ( #option-3---call-signature )
106+ - [ More Info] ( #more-info )
107+ - [ Portals] ( #portals )
108+ - [ Error Boundaries] ( #error-boundaries )
109+ - [ Option 1: Using react-error-boundary] ( #option-1-using-react-error-boundary )
110+ - [ Option 2: Writing your custom error boundary component] ( #option-2-writing-your-custom-error-boundary-component )
111+ - [ Concurrent React/React Suspense] ( #concurrent-reactreact-suspense )
112+ - [ Troubleshooting Handbook: Types] ( #troubleshooting-handbook-types )
113+ - [ Union Types and Type Guarding] ( #union-types-and-type-guarding )
114+ - [ Optional Types] ( #optional-types )
115+ - [ Enum Types] ( #enum-types )
116+ - [ Type Assertion] ( #type-assertion )
117+ - [ Simulating Nominal Types] ( #simulating-nominal-types )
118+ - [ Intersection Types] ( #intersection-types )
119+ - [ Union Types] ( #union-types )
120+ - [ Overloading Function Types] ( #overloading-function-types )
121+ - [ Using Inferred Types] ( #using-inferred-types )
122+ - [ Using Partial Types] ( #using-partial-types )
123+ - [ The Types I need weren't exported!] ( #the-types-i-need-werent-exported )
124+ - [ The Types I need don't exist!] ( #the-types-i-need-dont-exist )
125+ - [ Slapping ` any ` on everything] ( #slapping-any-on-everything )
126+ - [ Autogenerate types] ( #autogenerate-types )
127+ - [ Typing Exported Hooks] ( #typing-exported-hooks )
128+ - [ Typing Exported Components] ( #typing-exported-components )
129+ - [ Frequent Known Problems with TypeScript] ( #frequent-known-problems-with-typescript )
130+ - [ TypeScript doesn't narrow after an object element null check] ( #typescript-doesnt-narrow-after-an-object-element-null-check )
131+ - [ TypeScript doesn't let you restrict the type of children] ( #typescript-doesnt-let-you-restrict-the-type-of-children )
132+ - [ Troubleshooting Handbook: Operators] ( #troubleshooting-handbook-operators )
133+ - [ Troubleshooting Handbook: Utilities] ( #troubleshooting-handbook-utilities )
134+ - [ Troubleshooting Handbook: tsconfig.json] ( #troubleshooting-handbook-tsconfigjson )
135+ - [ Troubleshooting Handbook: Fixing bugs in official typings] ( #troubleshooting-handbook-fixing-bugs-in-official-typings )
136+ - [ Troubleshooting Handbook: Globals, Images and other non-TS files] ( #troubleshooting-handbook-globals-images-and-other-non-ts-files )
137+ - [ Editor Tooling and Integration] ( #editor-tooling-and-integration )
138+ - [ Linting] ( #linting )
139+ - [ Other React + TypeScript resources] ( #other-react--typescript-resources )
140+ - [ Recommended React + TypeScript talks] ( #recommended-react--typescript-talks )
141+ - [ Time to Really Learn TypeScript] ( #time-to-really-learn-typescript )
142+ - [ Example App] ( #example-app )
143+ - [ My question isn't answered here!] ( #my-question-isnt-answered-here )
144+ - [ Contributors] ( #contributors )
142145
143146<!-- START-SECTION:setup-->
144147
0 commit comments