Skip to content

Commit 0e2a0d9

Browse files
swyxioswyxio
committed
format
1 parent 406b62b commit 0e2a0d9

File tree

2 files changed

+31
-7
lines changed

2 files changed

+31
-7
lines changed

‎README.md

+28-4
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,10 @@
158158
- [Using Partial Types](#using-partial-types)
159159
- [The Types I need weren't exported!](#the-types-i-need-werent-exported)
160160
- [The Types I need don't exist!](#the-types-i-need-dont-exist)
161-
* [Slapping `any` on everything](#slapping-any-on-everything)
162-
* [Autogenerate types](#autogenerate-types)
163-
* [Typing Exported Hooks](#typing-exported-hooks)
164-
* [Typing Exported Components](#typing-exported-components)<!--END-SECTION:types-toc-->
161+
- [Slapping `any` on everything](#slapping-any-on-everything)
162+
- [Autogenerate types](#autogenerate-types)
163+
- [Typing Exported Hooks](#typing-exported-hooks)
164+
- [Typing Exported Components](#typing-exported-components)<!--END-SECTION:types-toc-->
165165
- [Troubleshooting Handbook: Operators](#troubleshooting-handbook-operators)
166166
- [Troubleshooting Handbook: Utilties](#troubleshooting-handbook-utilities)
167167
- [Troubleshooting Handbook: tsconfig.json](#troubleshooting-handbook-tsconfigjson)
@@ -177,6 +177,7 @@
177177
</details>
178178

179179
<!--START-SECTION:setup-->
180+
180181
# Section 1: Setup TypeScript with React
181182

182183
## Prerequisites
@@ -254,6 +255,7 @@ You should also check [the new TypeScript docs for official descriptions between
254255
# Section 2: Getting Started
255256

256257
<!--START-SECTION:function-components-->
258+
257259
## Function Components
258260

259261
These can be written as normal functions that take a `props` argument and return a JSX element.
@@ -382,6 +384,7 @@ const MyArrayComponent = () => (Array(5).fill(<div />) as any) as JSX.Element;
382384
<!--END-SECTION:function-components-->
383385

384386
<!--START-SECTION:hooks-->
387+
385388
## Hooks
386389

387390
Hooks are [supported in `@types/react` from v16.8 up](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L800-L1031).
@@ -665,6 +668,7 @@ If you are writing a React Hooks library, don't forget that you should also expo
665668
<!--END-SECTION:hooks-->
666669

667670
<!--START-SECTION:class-components-->
671+
668672
## Class Components
669673

670674
Within TypeScript, `React.Component` is a generic type (aka `React.Component<PropType, StateType>`), so you want to provide it with (optional) prop and state type parameters:
@@ -839,6 +843,7 @@ class Comp extends React.PureComponent<Props, State> {
839843
<!--END-SECTION:class-components-->
840844

841845
<!--START-SECTION:default-props-->
846+
842847
## You May Not Need `defaultProps`
843848

844849
As per [this tweet](https://twitter.com/dan_abramov/status/1133878326358171650), defaultProps will eventually be deprecated. You can check the discussions here:
@@ -1049,6 +1054,7 @@ The problem with this approach is it causes complex issues with the type inferen
10491054
<!--END-SECTION:default-props-->
10501055

10511056
<!--START-SECTION:basic-type-examples-->
1057+
10521058
## Typing Component Props
10531059

10541060
This is intended as a basic orientation and reference for React developers familiarizing with TypeScript.
@@ -1280,6 +1286,7 @@ class Comp extends React.PureComponent<Props, State> {
12801286
<!--END-SECTION:get-derived-state-from-props-->
12811287

12821288
<!--START-SECTION:forms-and-events-->
1289+
12831290
## Forms and Events
12841291

12851292
If performance is not an issue (and it usually isn't!), inlining handlers is easiest as you can just use [type inference and contextual typing](https://www.typescriptlang.org/docs/handbook/type-inference.html#contextual-typing):
@@ -1381,6 +1388,7 @@ Of course, if you're making any sort of significant form, [you should use Formik
13811388
<!--END-SECTION:forms-and-events-->
13821389

13831390
<!--START-SECTION:context-->
1391+
13841392
## Context
13851393

13861394
## Basic Example
@@ -1663,6 +1671,7 @@ const Consumer = Context.Consumer;
16631671
<!--END-SECTION:context-->
16641672

16651673
<!--START-SECTION:forward-create-ref-->
1674+
16661675
## forwardRef/createRef
16671676

16681677
Check the [Hooks section](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#hooks) for `useRef`.
@@ -1725,6 +1734,7 @@ You may also wish to do [Conditional Rendering with `forwardRef`](https://github
17251734
<!--END-SECTION:forward-create-ref-->
17261735

17271736
<!--START-SECTION:portals-->
1737+
17281738
## Portals
17291739

17301740
Using `ReactDOM.createPortal`:
@@ -1834,6 +1844,7 @@ This example is based on the [Event Bubbling Through Portal](https://reactjs.org
18341844
<!--END-SECTION:portals-->
18351845

18361846
<!--START-SECTION:error-boundaries-->
1847+
18371848
## Error Boundaries
18381849

18391850
### Option 1: Using react-error-boundary
@@ -1888,6 +1899,7 @@ export default ErrorBoundary;
18881899
<!--END-SECTION:error-boundaries-->
18891900

18901901
<!--START-SECTION:concurrent-->
1902+
18911903
## Concurrent React/React Suspense
18921904

18931905
_Not written yet._ watch <https://github.com/sw-yx/fresh-async-react> for more on React Suspense and Time Slicing.
@@ -1897,6 +1909,7 @@ _Not written yet._ watch <https://github.com/sw-yx/fresh-async-react> for more o
18971909
<!--END-SECTION:concurrent-->
18981910

18991911
<!--START-SECTION:types-->
1912+
19001913
# Troubleshooting Handbook: Types
19011914

19021915
> ⚠️ Have you read [the TypeScript FAQ](https://github.com/microsoft/TypeScript/wiki/FAQ?) Your answer might be there!
@@ -2442,6 +2455,7 @@ For more information on creating type definitions for class components, you can
24422455
<!--END-SECTION:types-->
24432456
24442457
<!--START-SECTION:operators-->
2458+
24452459
# Troubleshooting Handbook: Operators
24462460
24472461
- `typeof` and `instanceof`: type query used for refinement
@@ -2465,6 +2479,7 @@ Conditional Types are a difficult topic to get around so here are some extra res
24652479
<!--END-SECTION:operators-->
24662480
24672481
<!--START-SECTION:utilities-->
2482+
24682483
# Troubleshooting Handbook: Utilities
24692484
24702485
These are all built in, [see source in es5.d.ts](https://github.com/microsoft/TypeScript/blob/2c458c0d1ccb96442bca9ce43aa987fb0becf8a9/src/lib/es5.d.ts#L1401-L1474):
@@ -2486,6 +2501,7 @@ These are all built in, [see source in es5.d.ts](https://github.com/microsoft/Ty
24862501
<!--END-SECTION:utilities-->
24872502
24882503
<!--START-SECTION:ts-config-->
2504+
24892505
# Troubleshooting Handbook: tsconfig.json
24902506
24912507
You can find [all the Compiler options in the TypeScript docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html). [The new TS docs also has per-flag annotations of what each does](https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports). This is the setup I roll with for APPS (not libraries - for libraries you may wish to see the settings we use in `tsdx`):
@@ -2537,6 +2553,7 @@ Compilation speed grows linearly with size of codebase. For large projects, you
25372553
<!--END-SECTION:ts-config-->
25382554
25392555
<!--START-SECTION:official-typings-bugs-->
2556+
25402557
# Troubleshooting Handbook: Fixing bugs in official typings
25412558
25422559
If you run into bugs with your library's official typings, you can copy them locally and tell TypeScript to use your local version using the "paths" field. In your `tsconfig.json`:
@@ -2603,6 +2620,7 @@ You can see examples of these included in the built in type declarations in the
26032620
<!--END-SECTION:official-typings-bugs-->
26042621
26052622
<!--START-SECTION:non-ts-files-->
2623+
26062624
# Time to Really Learn TypeScript
26072625
26082626
Believe it or not, we have only barely introduced TypeScript here in this cheatsheet. If you are still facing TypeScript troubleshooting issues, it is likely that your understanding of TS is still too superficial.
@@ -2624,6 +2642,7 @@ It is worth mentioning some resources to help you get started:
26242642
<!--END-SECTION:non-ts-files-->
26252643
26262644
<!--START-SECTION:resources-->
2645+
26272646
# Other React + TypeScript resources
26282647
26292648
- me! <https://twitter.com/swyx>
@@ -2657,6 +2676,7 @@ It is worth mentioning some resources to help you get started:
26572676
<!--END-SECTION:resources-->
26582677
26592678
<!--START-SECTION:editor-integration-->
2679+
26602680
# Editor Tooling and Integration
26612681
26622682
- VSCode
@@ -2681,6 +2701,7 @@ You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/
26812701
<!--END-SECTION:editor-integration-->
26822702
26832703
<!--START-SECTION:linting-->
2704+
26842705
# Linting
26852706
26862707
> ⚠️Note that [TSLint is now in maintenance and you should try to use ESLint instead](https://medium.com/palantir/tslint-in-2019-1a144c2317a9). If you are interested in TSLint tips, please check this PR from [@azdanov](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/14). The rest of this section just focuses on ESLint. [You can convert TSlint to ESlint with this tool](https://github.com/typescript-eslint/tslint-to-eslint-config).
@@ -2811,6 +2832,7 @@ If you're looking for information on Prettier, check out the [Prettier](https://
28112832
<!--END-SECTION:other-resources-->
28122833
28132834
<!--START-SECTION:talks-->
2835+
28142836
# Recommended React + TypeScript talks
28152837
28162838
- [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018
@@ -2819,6 +2841,7 @@ If you're looking for information on Prettier, check out the [Prettier](https://
28192841
<!--END-SECTION:talks-->
28202842
28212843
<!--START-SECTION:learn-ts-->
2844+
28222845
# Time to Really Learn TypeScript
28232846
28242847
Believe it or not, we have only barely introduced TypeScript here in this cheatsheet. If you are still facing TypeScript troubleshooting issues, it is likely that your understanding of TS is still too superficial.
@@ -2840,6 +2863,7 @@ It is worth mentioning some resources to help you get started:
28402863
<!--END-SECTION:learn-ts-->
28412864
28422865
<!--START-SECTION:examples-->
2866+
28432867
# Example App
28442868
28452869
- [Create React App TypeScript Todo Example 2020](https://github.com/laststance/create-react-app-typescript-todo-example-2020)

‎docs/basic/troubleshooting/types.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,9 @@ Note that you cannot assert your way to anything - basically it is only for refi
137137
You can also assert a property is non-null, when accessing it:
138138

139139
```ts
140-
element.parentNode!.removeChild(element) // ! before the period
141-
myFunction(document.getElementById(dialog.id!)!) // ! after the property accessing
142-
let userID!: string // definite assignment assertion... be careful!
140+
element.parentNode!.removeChild(element); // ! before the period
141+
myFunction(document.getElementById(dialog.id!)!); // ! after the property accessing
142+
let userID!: string; // definite assignment assertion... be careful!
143143
```
144144

145145
Of course, try to actually handle the null case instead of asserting :)

0 commit comments

Comments
 (0)