Skip to content

Commit dde84ad

Browse files
github-actions[bot]github-actions[bot]
authored
Updated README on 2021-01-24T20:19:08.935Z
1 parent 2dc7b00 commit dde84ad

File tree

1 file changed

+4
-28
lines changed

1 file changed

+4
-28
lines changed

‎README.md

+4-28
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,7 +177,6 @@
177177
</details>
178178

179179
<!--START-SECTION:setup-->
180-
181180
# Section 1: Setup TypeScript with React
182181

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

257256
<!--START-SECTION:function-components-->
258-
259257
## Function Components
260258

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

379377
<!--START-SECTION:hooks-->
380-
381378
## Hooks
382379

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

658655
<!--START-SECTION:class-components-->
659-
660656
## Class Components
661657

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

833829
<!--START-SECTION:default-props-->
834-
835830
## You May Not Need `defaultProps`
836831

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

10441039
<!--START-SECTION:basic-type-examples-->
1045-
10461040
## Typing Component Props
10471041

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

12681262
<!--START-SECTION:forms-and-events-->
1269-
12701263
## Forms and Events
12711264

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

13701363
<!--START-SECTION:context-->
1371-
13721364
## Context
13731365

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

16531645
<!--START-SECTION:forward-create-ref-->
1654-
16551646
## forwardRef/createRef
16561647

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

17161707
<!--START-SECTION:portals-->
1717-
17181708
## Portals
17191709

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

18261816
<!--START-SECTION:error-boundaries-->
1827-
18281817
## Error Boundaries
18291818

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

18811870
<!--START-SECTION:concurrent-->
1882-
18831871
## Concurrent React/React Suspense
18841872

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

18911879
<!--START-SECTION:types-->
1892-
18931880
# Troubleshooting Handbook: Types
18941881

18951882
> ⚠️ Have you read [the TypeScript FAQ](https://github.com/microsoft/TypeScript/wiki/FAQ?) Your answer might be there!
@@ -2430,7 +2417,6 @@ For more information on creating type definitions for class components, you can
24302417
<!--END-SECTION:types-->
24312418
24322419
<!--START-SECTION:operators-->
2433-
24342420
# Troubleshooting Handbook: Operators
24352421
24362422
- `typeof` and `instanceof`: type query used for refinement
@@ -2454,7 +2440,6 @@ Conditional Types are a difficult topic to get around so here are some extra res
24542440
<!--END-SECTION:operators-->
24552441
24562442
<!--START-SECTION:utilities-->
2457-
24582443
# Troubleshooting Handbook: Utilities
24592444
24602445
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):
@@ -2476,7 +2461,6 @@ These are all built in, [see source in es5.d.ts](https://github.com/microsoft/Ty
24762461
<!--END-SECTION:utilities-->
24772462
24782463
<!--START-SECTION:ts-config-->
2479-
24802464
# Troubleshooting Handbook: tsconfig.json
24812465
24822466
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`):
@@ -2528,7 +2512,6 @@ Compilation speed grows linearly with size of codebase. For large projects, you
25282512
<!--END-SECTION:ts-config-->
25292513
25302514
<!--START-SECTION:official-typings-bugs-->
2531-
25322515
# Troubleshooting Handbook: Fixing bugs in official typings
25332516
25342517
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`:
@@ -2595,7 +2578,6 @@ You can see examples of these included in the built in type declarations in the
25952578
<!--END-SECTION:official-typings-bugs-->
25962579
25972580
<!--START-SECTION:non-ts-files-->
2598-
25992581
# Time to Really Learn TypeScript
26002582
26012583
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.
@@ -2616,7 +2598,6 @@ It is worth mentioning some resources to help you get started:
26162598
<!--END-SECTION:non-ts-files-->
26172599
26182600
<!--START-SECTION:resources-->
2619-
26202601
# Other React + TypeScript resources
26212602
26222603
- me! <https://twitter.com/swyx>
@@ -2639,7 +2620,6 @@ It is worth mentioning some resources to help you get started:
26392620
<!--END-SECTION:resources-->
26402621
26412622
<!--START-SECTION:editor-integration-->
2642-
26432623
# Editor Tooling and Integration
26442624
26452625
- VSCode
@@ -2664,7 +2644,6 @@ You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/
26642644
<!--END-SECTION:editor-integration-->
26652645
26662646
<!--START-SECTION:linting-->
2667-
26682647
# Linting
26692648
26702649
> ⚠️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).
@@ -2795,7 +2774,6 @@ If you're looking for information on Prettier, check out the [Prettier](https://
27952774
<!--END-SECTION:other-resources-->
27962775
27972776
<!--START-SECTION:talks-->
2798-
27992777
# Recommended React + TypeScript talks
28002778
28012779
- [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018
@@ -2804,7 +2782,6 @@ If you're looking for information on Prettier, check out the [Prettier](https://
28042782
<!--END-SECTION:talks-->
28052783
28062784
<!--START-SECTION:learn-ts-->
2807-
28082785
# Time to Really Learn TypeScript
28092786
28102787
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.
@@ -2825,7 +2802,6 @@ It is worth mentioning some resources to help you get started:
28252802
<!--END-SECTION:learn-ts-->
28262803
28272804
<!--START-SECTION:examples-->
2828-
28292805
# Example App
28302806
28312807
- [Create React App TypeScript Todo Example 2020](https://github.com/laststance/create-react-app-typescript-todo-example-2020)

0 commit comments

Comments
 (0)