Skip to content

Commit 6528687

Browse files
Updated README on 2021-01-24T17:24:39.470Z
1 parent 253f1a4 commit 6528687

File tree

1 file changed

+17
-41
lines changed

1 file changed

+17
-41
lines changed

README.md

Lines changed: 17 additions & 41 deletions
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!
@@ -1978,32 +1965,29 @@ _Something to add? [File an issue](https://github.com/typescript-cheatsheets/rea
19781965

19791966
## Enum Types
19801967

1981-
Enums in TypeScript default to numbers. You will usually want to use them as strings instead:
1968+
**We recommend avoiding using enums as far as possible**.
1969+
1970+
Enums have a few [documented issues](https://fettblog.eu/tidy-typescript-avoid-enums/) (the TS team [agrees](https://twitter.com/orta/status/1348966323271987201?s=20)). A simpler alternative to enums is just declaring a union type of string literals:
1971+
1972+
```tsx
1973+
export declare type Position = "left" | "right" | "top" | "bottom";
1974+
```
1975+
1976+
If you must use enums, remember that enums in TypeScript default to numbers. You will usually want to use them as strings instead:
19821977

19831978
```tsx
19841979
export enum ButtonSizes {
19851980
default = "default",
19861981
small = "small",
19871982
large = "large",
19881983
}
1989-
```
1990-
1991-
Usage:
19921984

1993-
```tsx
1985+
// usage
19941986
export const PrimaryButton = (
19951987
props: Props & React.HTMLProps<HTMLButtonElement>
19961988
) => <Button size={ButtonSizes.default} {...props} />;
19971989
```
19981990

1999-
A simpler alternative to enum is just declaring a bunch of strings with union:
2000-
2001-
```tsx
2002-
export declare type Position = "left" | "right" | "top" | "bottom";
2003-
```
2004-
2005-
This is handy because TypeScript will throw errors when you mistype a string for your props.
2006-
20071991
## Type Assertion
20081992

20091993
Sometimes you know better than TypeScript that the type you're using is narrower than it thinks, or union types need to be asserted to a more specific type to work with other APIs, so assert with the `as` keyword. This tells the compiler you know better than it does.
@@ -2433,7 +2417,6 @@ For more information on creating type definitions for class components, you can
24332417
<!--END-SECTION:types-->
24342418
24352419
<!--START-SECTION:operators-->
2436-
24372420
# Troubleshooting Handbook: Operators
24382421
24392422
- `typeof` and `instanceof`: type query used for refinement
@@ -2452,11 +2435,11 @@ Conditional Types are a difficult topic to get around so here are some extra res
24522435
- fully walked through explanation https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
24532436
- Bailing out and other advanced topics https://github.com/sw-yx/ts-spec/blob/master/conditional-types.md
24542437
- Basarat's video https://www.youtube.com/watch?v=SbVgPQDealg&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=2&t=0s
2438+
- [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
24552439
24562440
<!--END-SECTION:operators-->
24572441
24582442
<!--START-SECTION:utilities-->
2459-
24602443
# Troubleshooting Handbook: Utilities
24612444
24622445
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):
@@ -2478,7 +2461,6 @@ These are all built in, [see source in es5.d.ts](https://github.com/microsoft/Ty
24782461
<!--END-SECTION:utilities-->
24792462
24802463
<!--START-SECTION:ts-config-->
2481-
24822464
# Troubleshooting Handbook: tsconfig.json
24832465
24842466
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`):
@@ -2530,7 +2512,6 @@ Compilation speed grows linearly with size of codebase. For large projects, you
25302512
<!--END-SECTION:ts-config-->
25312513
25322514
<!--START-SECTION:official-typings-bugs-->
2533-
25342515
# Troubleshooting Handbook: Fixing bugs in official typings
25352516
25362517
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`:
@@ -2597,7 +2578,6 @@ You can see examples of these included in the built in type declarations in the
25972578
<!--END-SECTION:official-typings-bugs-->
25982579
25992580
<!--START-SECTION:non-ts-files-->
2600-
26012581
# Time to Really Learn TypeScript
26022582
26032583
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.
@@ -2611,13 +2591,13 @@ It is worth mentioning some resources to help you get started:
26112591
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
26122592
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
26132593
- Rares Matei: [Egghead.io course](https://egghead.io/courses/practical-advanced-typescript)'s advanced TypeScript course on Egghead.io is great for newer typescript features and practical type logic applications (e.g. recursively making all properties of a type `readonly`)
2594+
- Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
26142595
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
26152596
- Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors.
26162597
26172598
<!--END-SECTION:non-ts-files-->
26182599
26192600
<!--START-SECTION:resources-->
2620-
26212601
# Other React + TypeScript resources
26222602
26232603
- me! <https://twitter.com/swyx>
@@ -2640,7 +2620,6 @@ It is worth mentioning some resources to help you get started:
26402620
<!--END-SECTION:resources-->
26412621
26422622
<!--START-SECTION:editor-integration-->
2643-
26442623
# Editor Tooling and Integration
26452624
26462625
- VSCode
@@ -2665,7 +2644,6 @@ You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/
26652644
<!--END-SECTION:editor-integration-->
26662645
26672646
<!--START-SECTION:linting-->
2668-
26692647
# Linting
26702648
26712649
> ⚠️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).
@@ -2796,7 +2774,6 @@ If you're looking for information on Prettier, check out the [Prettier](https://
27962774
<!--END-SECTION:other-resources-->
27972775
27982776
<!--START-SECTION:talks-->
2799-
28002777
# Recommended React + TypeScript talks
28012778
28022779
- [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018
@@ -2805,7 +2782,6 @@ If you're looking for information on Prettier, check out the [Prettier](https://
28052782
<!--END-SECTION:talks-->
28062783
28072784
<!--START-SECTION:learn-ts-->
2808-
28092785
# Time to Really Learn TypeScript
28102786
28112787
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.
@@ -2819,13 +2795,13 @@ It is worth mentioning some resources to help you get started:
28192795
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
28202796
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
28212797
- Rares Matei: [Egghead.io course](https://egghead.io/courses/practical-advanced-typescript)'s advanced TypeScript course on Egghead.io is great for newer typescript features and practical type logic applications (e.g. recursively making all properties of a type `readonly`)
2798+
- Learn about [Generics, Conditional types and Mapped types](https://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be)
28222799
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
28232800
- Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors.
28242801
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)