1
- # React+ TypeScript Cheatsheets
1
+ # React TypeScript Cheatsheet
2
2
3
- Cheatsheets for experienced React developers getting started with TypeScript
3
+ Cheatsheet for using React with TypeScript.
4
4
5
5
---
6
6
@@ -15,18 +15,14 @@ Cheatsheets for experienced React developers getting started with TypeScript
15
15
</a >
16
16
17
17
[ ** 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 ) |
20
18
[ Contribute!] ( https://github.com/typescript-cheatsheets/react/blob/main/CONTRIBUTING.md ) |
21
19
[ Ask!] ( https://github.com/typescript-cheatsheets/react/issues/new/choose )
22
20
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 :
24
22
25
23
---
26
24
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 )
30
26
31
27
- [ 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**
32
28
- Focus on opinionated best practices, copy+pastable examples.
@@ -55,90 +51,97 @@ Cheatsheets for experienced React developers getting started with TypeScript
55
51
56
52
<summary ><b >Expand Table of Contents</b ></summary >
57
53
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 )
142
145
143
146
<!-- START-SECTION:setup-->
144
147
0 commit comments