Skip to content

Commit cfdc9ef

Browse files
author
swyx
committed
format
1 parent dde84ad commit cfdc9ef

File tree

1 file changed

+28
-4
lines changed

1 file changed

+28
-4
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.
@@ -375,6 +377,7 @@ const MyArrayComponent = () => (Array(5).fill(<div />) as any) as JSX.Element;
375377
<!--END-SECTION:function-components-->
376378

377379
<!--START-SECTION:hooks-->
380+
378381
## Hooks
379382

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

655658
<!--START-SECTION:class-components-->
659+
656660
## Class Components
657661

658662
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:
@@ -827,6 +831,7 @@ class Comp extends React.PureComponent<Props, State> {
827831
<!--END-SECTION:class-components-->
828832

829833
<!--START-SECTION:default-props-->
834+
830835
## You May Not Need `defaultProps`
831836

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

10391044
<!--START-SECTION:basic-type-examples-->
1045+
10401046
## Typing Component Props
10411047

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

12621268
<!--START-SECTION:forms-and-events-->
1269+
12631270
## Forms and Events
12641271

12651272
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):
@@ -1361,6 +1368,7 @@ Of course, if you're making any sort of significant form, [you should use Formik
13611368
<!--END-SECTION:forms-and-events-->
13621369

13631370
<!--START-SECTION:context-->
1371+
13641372
## Context
13651373

13661374
## Basic Example
@@ -1643,6 +1651,7 @@ const Consumer = Context.Consumer;
16431651
<!--END-SECTION:context-->
16441652

16451653
<!--START-SECTION:forward-create-ref-->
1654+
16461655
## forwardRef/createRef
16471656

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

17071716
<!--START-SECTION:portals-->
1717+
17081718
## Portals
17091719

17101720
Using `ReactDOM.createPortal`:
@@ -1814,6 +1824,7 @@ This example is based on the [Event Bubbling Through Portal](https://reactjs.org
18141824
<!--END-SECTION:portals-->
18151825

18161826
<!--START-SECTION:error-boundaries-->
1827+
18171828
## Error Boundaries
18181829

18191830
### Option 1: Using react-error-boundary
@@ -1868,6 +1879,7 @@ export default ErrorBoundary;
18681879
<!--END-SECTION:error-boundaries-->
18691880

18701881
<!--START-SECTION:concurrent-->
1882+
18711883
## Concurrent React/React Suspense
18721884

18731885
_Not written yet._ watch <https://github.com/sw-yx/fresh-async-react> for more on React Suspense and Time Slicing.
@@ -1877,6 +1889,7 @@ _Not written yet._ watch <https://github.com/sw-yx/fresh-async-react> for more o
18771889
<!--END-SECTION:concurrent-->
18781890

18791891
<!--START-SECTION:types-->
1892+
18801893
# Troubleshooting Handbook: Types
18811894

18821895
> ⚠️ Have you read [the TypeScript FAQ](https://github.com/microsoft/TypeScript/wiki/FAQ?) Your answer might be there!
@@ -2417,6 +2430,7 @@ For more information on creating type definitions for class components, you can
24172430
<!--END-SECTION:types-->
24182431
24192432
<!--START-SECTION:operators-->
2433+
24202434
# Troubleshooting Handbook: Operators
24212435
24222436
- `typeof` and `instanceof`: type query used for refinement
@@ -2440,6 +2454,7 @@ Conditional Types are a difficult topic to get around so here are some extra res
24402454
<!--END-SECTION:operators-->
24412455
24422456
<!--START-SECTION:utilities-->
2457+
24432458
# Troubleshooting Handbook: Utilities
24442459
24452460
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):
@@ -2461,6 +2476,7 @@ These are all built in, [see source in es5.d.ts](https://github.com/microsoft/Ty
24612476
<!--END-SECTION:utilities-->
24622477
24632478
<!--START-SECTION:ts-config-->
2479+
24642480
# Troubleshooting Handbook: tsconfig.json
24652481
24662482
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`):
@@ -2512,6 +2528,7 @@ Compilation speed grows linearly with size of codebase. For large projects, you
25122528
<!--END-SECTION:ts-config-->
25132529
25142530
<!--START-SECTION:official-typings-bugs-->
2531+
25152532
# Troubleshooting Handbook: Fixing bugs in official typings
25162533
25172534
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`:
@@ -2578,6 +2595,7 @@ You can see examples of these included in the built in type declarations in the
25782595
<!--END-SECTION:official-typings-bugs-->
25792596
25802597
<!--START-SECTION:non-ts-files-->
2598+
25812599
# Time to Really Learn TypeScript
25822600
25832601
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.
@@ -2598,6 +2616,7 @@ It is worth mentioning some resources to help you get started:
25982616
<!--END-SECTION:non-ts-files-->
25992617
26002618
<!--START-SECTION:resources-->
2619+
26012620
# Other React + TypeScript resources
26022621
26032622
- me! <https://twitter.com/swyx>
@@ -2620,6 +2639,7 @@ It is worth mentioning some resources to help you get started:
26202639
<!--END-SECTION:resources-->
26212640
26222641
<!--START-SECTION:editor-integration-->
2642+
26232643
# Editor Tooling and Integration
26242644
26252645
- VSCode
@@ -2644,6 +2664,7 @@ You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/
26442664
<!--END-SECTION:editor-integration-->
26452665
26462666
<!--START-SECTION:linting-->
2667+
26472668
# Linting
26482669
26492670
> ⚠️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).
@@ -2774,6 +2795,7 @@ If you're looking for information on Prettier, check out the [Prettier](https://
27742795
<!--END-SECTION:other-resources-->
27752796
27762797
<!--START-SECTION:talks-->
2798+
27772799
# Recommended React + TypeScript talks
27782800
27792801
- [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018
@@ -2782,6 +2804,7 @@ If you're looking for information on Prettier, check out the [Prettier](https://
27822804
<!--END-SECTION:talks-->
27832805
27842806
<!--START-SECTION:learn-ts-->
2807+
27852808
# Time to Really Learn TypeScript
27862809
27872810
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.
@@ -2802,6 +2825,7 @@ It is worth mentioning some resources to help you get started:
28022825
<!--END-SECTION:learn-ts-->
28032826
28042827
<!--START-SECTION:examples-->
2828+
28052829
# Example App
28062830
28072831
- [Create React App TypeScript Todo Example 2020](https://github.com/laststance/create-react-app-typescript-todo-example-2020)

0 commit comments

Comments
 (0)