Skip to content

Commit 35e83c9

Browse files
committed
add defaultprops and fixes from reddit discussion
add nitpicks from clutchhunter https://www.reddit.com/r/reactjs/comments/8o5owb/react_typescript_cheatsheet_for_react_users_using/e01d2md/?context=3 add defaultprops discussion typescript-cheatsheets/react#4
1 parent 046204a commit 35e83c9

File tree

1 file changed

+25
-11
lines changed

1 file changed

+25
-11
lines changed

README.md

+25-11
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
- [Import React](#import-react)
99
- [Stateless Functional Components](#stateless-functional-components)
1010
- [Stateful Class-based Components](#stateful-class-based-components)
11+
- [Typing DefaultProps](#typing-defaultprops)
1112
- [Extracting Prop Types](#extracting-prop-types)
1213
- [Basic Prop Types Examples](#basic-prop-types-examples)
1314
- [Useful React Type Examples](#useful-react-type-examples)
@@ -17,17 +18,19 @@
1718
- [Component/Design System Development](#component-design-system-development)
1819
- [Building](#building)
1920
- [Prettier + TSLint](#prettier---tslint)
21+
- [Working with Non-Typescript Libraries (writing your own index.d.ts)](#working-with-non-typescript-libraries--writing-your-own-indexdts-)
2022
- [Troubleshooting Handbook: Types](#troubleshooting-handbook--types)
2123
* [Union types](#union-types)
2224
* [Optional Types](#optional-types)
2325
* [Enum Types](#enum-types)
24-
* [Type Casting](#type-casting)
26+
* [Type Assertion](#type-assertion)
2527
* [Intersection Types](#intersection-types)
2628
* [Omit attribute from a type](#omit-attribute-from-a-type)
29+
* [Type Zoo](#type-zoo)
2730
- [Troubleshooting Handbook: TSLint](#troubleshooting-handbook--tslint)
2831
- [Troubleshooting Handbook: tsconfig.json](#troubleshooting-handbook--tsconfigjson)
2932
- [Recommended React + Typescript codebases to learn from](#recommended-react---typescript-codebases-to-learn-from)
30-
- [People you can ask React + Typescript questions about](#people-you-can-ask-react---typescript-questions-about)
33+
- [Other React + Typescript resources](#other-react---typescript-resources)
3134
- [My question isn't answered here!](#my-question-isn-t-answered-here-)
3235

3336
</details>
@@ -181,6 +184,11 @@ class App extends React.Component<{
181184
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
182185
</details>
183186

187+
# Typing DefaultProps
188+
189+
It is easy to [type defaults for functional components](https://twitter.com/GeeWengel/status/1000242363376205825), but there is some debate in the community on how to type the `static defaultProps` field for class-based components. We have an active discussion on several approaches on how to do this. [Please check out our issue here](https://github.com/sw-yx/react-typescript-cheatsheet/issues/4).
190+
191+
184192
# Extracting Prop Types
185193

186194
Instead of defining prop types inline, you can declare them separately (useful for reusability or code organization):
@@ -220,7 +228,6 @@ class App extends React.Component<AppProps, AppState> {
220228
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
221229
</details>
222230

223-
224231
# Basic Prop Types Examples
225232

226233
```tsx
@@ -393,8 +400,7 @@ This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/r
393400

394401
# Working with Non-Typescript Libraries (writing your own index.d.ts)
395402

396-
397-
Please contribute on this topic! [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
403+
Please contribute on this topic! [We have an ongoing issue here with some references](https://github.com/sw-yx/react-typescript-cheatsheet/issues/8).
398404

399405
<details>
400406

@@ -490,7 +496,7 @@ export const PrimaryButton = (
490496
);
491497
```
492498

493-
Perhaps a better alternative to enum though, is just declaring a bunch of strings with union:
499+
A simpler alternative to enum is just declaring a bunch of strings with union, but this doesn't get autocompletion or syntactic benefits:
494500

495501
```tsx
496502
export declare type Position = 'left' | 'right' | 'top' | 'bottom';
@@ -504,10 +510,9 @@ This handy because Typescript will throw errors when you mistype a string for yo
504510

505511
</details>
506512

507-
## Type Casting
508-
509-
Sometimes union types need to be cast to a more specific type to work with other APIs, so cast with the `as` keyword.
513+
## Type Assertion
510514

515+
Sometimes Typescript is just getting your type wrong, 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.
511516

512517
```tsx
513518
class MyComponent extends React.Component<{
@@ -526,7 +531,9 @@ class MyComponent extends React.Component<{
526531

527532
<summary>Explanation</summary>
528533

529-
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
534+
Note that this is [not the same as casting](https://www.reddit.com/r/reactjs/comments/8o5owb/react_typescript_cheatsheet_for_react_users_using/e01d2md/?context=3).
535+
536+
Something to add? Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
530537
</details>
531538

532539

@@ -588,6 +595,10 @@ export const Checkbox = (
588595
This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new) with your suggestions!
589596
</details>
590597

598+
## Type Zoo
599+
600+
As you can see from the Omit example above, you can write significant logic in your types as well. [type-zoo](https://github.com/pelotom/type-zoo) is a nice toolkit of operators you may wish to check out (includes Omit).
601+
591602
# Troubleshooting Handbook: TSLint
592603

593604
Sometimes TSLint is just getting in the way. Judicious turning off of things can be helpful. Here are useful tslint disables you may use:
@@ -666,7 +677,10 @@ This is not yet written. Please PR or [File an issue](https://github.com/sw-yx/r
666677
# Other React + Typescript resources
667678

668679
- me! <https://twitter.com/swyx>
669-
- <https://github.com/piotrwitek/react-redux-typescript-guide> - **HIGHLY HIGHLY RECOMMENDED**, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover.
680+
- <https://github.com/piotrwitek/react-redux-typescript-guide> - **HIGHLY HIGHLY RECOMMENDED**, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover, including **REDUX** and **JEST**.
681+
- [Ultimate React Component Patterns with Typescript 2.8](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935)
682+
- [Basarat's Typescript gitbook has a React section](https://basarat.gitbooks.io/typescript/content/docs/jsx/react.html) with an Egghead.io course as well.
683+
- [Charles Bryant's gitbook](https://charleslbryant.gitbooks.io/hello-react-and-typescript/content/) 2yrs old and on the more basic side but has sample code and IDE advice.
670684
- [You?](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).
671685

672686
# My question isn't answered here!

0 commit comments

Comments
 (0)