You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -255,7 +254,6 @@ You should also check [the new TypeScript docs for official descriptions between
255
254
# Section 2: Getting Started
256
255
257
256
<!--START-SECTION:function-components-->
258
-
259
257
## Function Components
260
258
261
259
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;
377
375
<!--END-SECTION:function-components-->
378
376
379
377
<!--START-SECTION:hooks-->
380
-
381
378
## Hooks
382
379
383
380
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
656
653
<!--END-SECTION:hooks-->
657
654
658
655
<!--START-SECTION:class-components-->
659
-
660
656
## Class Components
661
657
662
658
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> {
831
827
<!--END-SECTION:class-components-->
832
828
833
829
<!--START-SECTION:default-props-->
834
-
835
830
## You May Not Need `defaultProps`
836
831
837
832
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
1042
1037
<!--END-SECTION:default-props-->
1043
1038
1044
1039
<!--START-SECTION:basic-type-examples-->
1045
-
1046
1040
## Typing Component Props
1047
1041
1048
1042
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> {
1266
1260
<!--END-SECTION:get-derived-state-from-props-->
1267
1261
1268
1262
<!--START-SECTION:forms-and-events-->
1269
-
1270
1263
## Forms and Events
1271
1264
1272
1265
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
_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
1889
1877
<!--END-SECTION:concurrent-->
1890
1878
1891
1879
<!--START-SECTION:types-->
1892
-
1893
1880
# Troubleshooting Handbook: Types
1894
1881
1895
1882
> ⚠️ 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
1978
1965
1979
1966
## Enum Types
1980
1967
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:
This is handy because TypeScript will throw errors when you mistype a string for your props.
2006
-
2007
1991
## Type Assertion
2008
1992
2009
1993
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
2433
2417
<!--END-SECTION:types-->
2434
2418
2435
2419
<!--START-SECTION:operators-->
2436
-
2437
2420
# Troubleshooting Handbook: Operators
2438
2421
2439
2422
- `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
2452
2435
- fully walked through explanation https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
2453
2436
- Bailing out and other advanced topics https://github.com/sw-yx/ts-spec/blob/master/conditional-types.md
2454
2437
- 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)
2455
2439
2456
2440
<!--END-SECTION:operators-->
2457
2441
2458
2442
<!--START-SECTION:utilities-->
2459
-
2460
2443
# Troubleshooting Handbook: Utilities
2461
2444
2462
2445
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
2478
2461
<!--END-SECTION:utilities-->
2479
2462
2480
2463
<!--START-SECTION:ts-config-->
2481
-
2482
2464
# Troubleshooting Handbook: tsconfig.json
2483
2465
2484
2466
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
2530
2512
<!--END-SECTION:ts-config-->
2531
2513
2532
2514
<!--START-SECTION:official-typings-bugs-->
2533
-
2534
2515
# Troubleshooting Handbook: Fixing bugs in official typings
2535
2516
2536
2517
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
2597
2578
<!--END-SECTION:official-typings-bugs-->
2598
2579
2599
2580
<!--START-SECTION:non-ts-files-->
2600
-
2601
2581
# Time to Really Learn TypeScript
2602
2582
2603
2583
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:
2611
2591
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
2612
2592
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
2613
2593
- 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)
2614
2595
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
2615
2596
- Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors.
2616
2597
2617
2598
<!--END-SECTION:non-ts-files-->
2618
2599
2619
2600
<!--START-SECTION:resources-->
2620
-
2621
2601
# Other React + TypeScript resources
2622
2602
2623
2603
- me! <https://twitter.com/swyx>
@@ -2640,7 +2620,6 @@ It is worth mentioning some resources to help you get started:
2640
2620
<!--END-SECTION:resources-->
2641
2621
2642
2622
<!--START-SECTION:editor-integration-->
2643
-
2644
2623
# Editor Tooling and Integration
2645
2624
2646
2625
- VSCode
@@ -2665,7 +2644,6 @@ You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/
2665
2644
<!--END-SECTION:editor-integration-->
2666
2645
2667
2646
<!--START-SECTION:linting-->
2668
-
2669
2647
# Linting
2670
2648
2671
2649
> ⚠️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://
2796
2774
<!--END-SECTION:other-resources-->
2797
2775
2798
2776
<!--START-SECTION:talks-->
2799
-
2800
2777
# Recommended React + TypeScript talks
2801
2778
2802
2779
- [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://
2805
2782
<!--END-SECTION:talks-->
2806
2783
2807
2784
<!--START-SECTION:learn-ts-->
2808
-
2809
2785
# Time to Really Learn TypeScript
2810
2786
2811
2787
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:
2819
2795
- Marius Schultz: https://blog.mariusschulz.com/series/typescript-evolution with an [Egghead.io course](https://egghead.io/courses/advanced-static-types-in-typescript)
2820
2796
- Basarat's Deep Dive: https://basarat.gitbook.io/typescript/
2821
2797
- 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)
2822
2799
- Shu Uesugi: [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
2823
2800
- Here is another [TypeScript Error Guide](https://github.com/threehams/typescript-error-guide/) that you can check for your errors.
2824
2801
2825
2802
<!--END-SECTION:learn-ts-->
2826
2803
2827
2804
<!--START-SECTION:examples-->
2828
-
2829
2805
# Example App
2830
2806
2831
2807
- [Create React App TypeScript Todo Example 2020](https://github.com/laststance/create-react-app-typescript-todo-example-2020)
0 commit comments