Skip to content

Commit 0e99580

Browse files
stepanenkogithub-actions[bot]ledenisswyxioeps1lon
authored
Update from original (#1)
* Updated README on 2021-04-02T14:21:23.928Z * Fix missing parenthesis in troubleshooting types code example (typescript-cheatsheets#399) Co-authored-by: swyx <[email protected]> * format * minor improvements to "adding non-standard attributes" (typescript-cheatsheets#400) * Added event types and their descriptions (typescript-cheatsheets#402) * Added form types and their descriptions I was looking for a complete list of form types and couldn't find any anywhere. I went through the source code and extracted these with adding some description to them, either using MDN's description or some other website explanation. * Apply suggestions from code review Co-authored-by: swyx <[email protected]> * fix: Remove incorrect usage of "widening" (typescript-cheatsheets#405) Using an intersection type here is actually narrowing the type, but the intent here seems to be to introduce type assertions, not talk about the difference between wider and narrower types. * add type assertion for useState thanks @priscilaandreani closes typescript-cheatsheets#403 * format * Fixed typo (typescript-cheatsheets#406) Fixed an issue where a paragraph described three different options as two. * Add rollpkg as an option for creating libraries (typescript-cheatsheets#407) * useLocalStorage Type detection bug (typescript-cheatsheets#409) in my vs code it detects that the type of soredValue is (T | (value: T | ((val: T) => T)) => void) but it must be just (T) so it throws error with this change it solved. * Updated README on 2021-04-25T20:13:23.562Z Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Denis LE <[email protected]> Co-authored-by: swyx <[email protected]> Co-authored-by: Sebastian Silbermann <[email protected]> Co-authored-by: Lars <[email protected]> Co-authored-by: Gerrit Birkeland <[email protected]> Co-authored-by: Christopher Kumm <[email protected]> Co-authored-by: Rafael Pedicini <[email protected]> Co-authored-by: Mandy YP <[email protected]>
1 parent 43bd48d commit 0e99580

File tree

7 files changed

+142
-52
lines changed

7 files changed

+142
-52
lines changed

‎README.md

Lines changed: 83 additions & 44 deletions
Large diffs are not rendered by default.

‎docs/advanced/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ title: Advanced Cheatsheet
1414

1515
The best tool for creating React + TS libraries right now is [`tsdx`](https://github.com/palmerhq/tsdx). Run `npx tsdx create` and select the "react" option. You can view [the React User Guide](https://github.com/palmerhq/tsdx/issues/5) for a few tips on React+TS library best practices and optimizations for production.
1616

17+
Another option is [Rollpkg](https://github.com/rafgraph/rollpkg), which uses Rollup and the TypeScript compiler (not Babel) to create packages. It includes default configs for TypeScript, Prettier, ESLint, and Jest (setup for use with React), as well as Bundlephobia package stats for each build.
18+
1719
- Be sure to also check [`basarat`'s guide](https://basarat.gitbooks.io/typescript/content/docs/quick/library.html) for library tsconfig settings.
1820
- Alec Larson: [The best Rollup config for TypeScript libraries](https://gist.github.com/aleclarson/9900ed2a9a3119d865286b218e14d226)
1921
- From the Angular world, check out https://github.com/bitjson/typescript-starter

‎docs/advanced/types-react-ap.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,9 +130,9 @@ Anything not listed above is considered an internal type and not public. If you'
130130
### Adding non-standard attributes
131131

132132
The attributes allowed on host components such as `button` or `img` follow the
133-
HTML living standard. New features that are not yet part of specification
133+
[HTML living standard](https://html.spec.whatwg.org/). New features that are not yet part of the living standard
134134
or are only implemented by certain browsers will therefore cause a type error. If
135-
you specifically write code for these browsers or polyfill this attributes you can
135+
you specifically write code for these browsers or polyfill these attributes you can
136136
use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to still get those components type checked without having
137137
to use `any` or `@ts-ignore`.
138138

‎docs/basic/getting-started/forms-and-events.md

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The first method uses an inferred method signature `(e: React.FormEvent<HTMLInpu
6161

6262
**Typing onSubmit, with Uncontrolled components in a Form**
6363

64-
If you don't quite care about the type of the event, you can just use React.SyntheticEvent. If your target form has custom named inputs that you'd like to access, you can use type widening:
64+
If you don't quite care about the type of the event, you can just use React.SyntheticEvent. If your target form has custom named inputs that you'd like to access, you can use a type assertion:
6565

6666
```tsx
6767
<form
@@ -98,3 +98,41 @@ If you don't quite care about the type of the event, you can just use React.Synt
9898
[View in the TypeScript Playground](https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGctoRlM4BeRYmAOgFc6kLABQBKClVoM4AMSbs4o9gD4FFOHAA8mJmrhFMbAN7aozJJgC+u2gGVeAIxDAYRoUgBcndDxsBPGjAAFkgwwGgAogBuSAEiynCGuupI3GBE0QEAIuYovAA2MKIA3Elw1PTwMChQAOYh8ilVtfUodHAwvmBIEKyN1XXwAGQJpckgKMB5noZwkSh5vB5wDFDANDVwFiXk6rtwYK10AO7QACbTs-OLnitrG1ulDzu75VJI45PyTQPc7xN53DmCyQRTgAHowe1Okg0ME0ABrOgAQlKr3gBzoxzOX36IVShxOUFOgKuIPBkI6XVhMMRKOe6ghcBCaG4rN0Fis5CUug0p2AkW59M0eRQ9iQeUFe3U4Q+U1GmjWYF4lWhbAARH9Jmq4DQUCAkOrNXltWDJbsNGCRWKJTywXyBTz7Wb1BoreLnbsAAoEs7ueUaRXKqFddUYrFE7W6-Whn0R8Eei1um3PC1Ox38hOBlUhtV0BxOGDaoGLdUAGQgGzWJrNqYzFAtJhAgpEQA)
9999

100100
Of course, if you're making any sort of significant form, [you should use Formik](https://jaredpalmer.com/formik) or [React Hook Form](https://react-hook-form.com/), which are written in TypeScript.
101+
102+
### List of event types
103+
104+
| Event Type | Description |
105+
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
106+
| AnimationEvent | CSS Animations. |
107+
| ChangeEvent | Changing the value of `<input>`, `<select>` and `<textarea>` element. |
108+
| ClipboardEvent | Using copy, paste and cut events. |
109+
| CompositionEvent | Events that occur due to the user indirectly entering text (e.g. depending on Browser and PC setup, a popup window may appear with additional characters if you e.g. want to type Japanese on a US Keyboard) |
110+
| DragEvent | Drag and drop interaction with a pointer device (e.g. mouse). |
111+
| FocusEvent | Event that occurs when elements gets or loses focus. |
112+
| FormEvent | Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted. |
113+
| InvalidEvent | Fired when validity restrictions of an input fails (e.g `<input type="number" max="10">` and someone would insert number 20). |
114+
| KeyboardEvent | User interaction with the keyboard. Each event describes a single key interaction. |
115+
| MouseEvent | Events that occur due to the user interacting with a pointing device (e.g. mouse) |
116+
| PointerEvent | Events that occur due to user interaction with a variety pointing of devices such as mouse, pen/stylus, a touchscreen and which also supports multi-touch. Unless you develop for older browsers (IE10 or Safari 12), pointer events are recommended. Extends UIEvent. |
117+
| TouchEvent | Events that occur due to the user interacting with a touch device. Extends UIEvent. |
118+
| TransitionEvent | CSS Transition. Not fully browser supported. Extends UIEvent |
119+
| UIEvent | Base Event for Mouse, Touch and Pointer events. |
120+
| WheelEvent | Scrolling on a mouse wheel or similar input device. (Note: `wheel` event should not be confused with the `scroll` event) |
121+
| SyntheticEvent | The base event for all above events. Should be used when unsure about event type |
122+
123+
<details>
124+
<summary>
125+
126+
**What about `InputEvent`?**
127+
128+
</summary>
129+
130+
You've probably noticed that there is no `InputEvent`. This is because it is not supported by Typescript as the event itself has no fully browser support and may behave differently in different browsers. You can use `KeyboardEvent` instead.
131+
132+
Sources:
133+
134+
- https://github.com/microsoft/TypeScript/issues/29441
135+
- https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
136+
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
137+
138+
</details>

‎docs/basic/getting-started/hooks.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Hooks are [supported in `@types/react` from v16.8 up](https://github.com/Definit
77

88
## useState
99

10-
Type inference works very well most of the time:
10+
Type inference works very well for simple values:
1111

1212
```tsx
1313
const [val, toggle] = React.useState(false);
@@ -26,6 +26,17 @@ const [user, setUser] = React.useState<IUser | null>(null);
2626
setUser(newUser);
2727
```
2828

29+
You can also use type assertions if a state is initialized soon after setup and always has a value after:
30+
31+
```tsx
32+
const [user, setUser] = React.useState<IUser>({} as IUser);
33+
34+
// later...
35+
setUser(newUser);
36+
```
37+
38+
This temporarily "lies" to the TypeScript compiler that `{}` is of type `IUser`. You should follow up by setting the `user` state — if you don't, the rest of your code may rely on the fact that `user` is of type `IUser` and that may lead to runtime errors.
39+
2940
## useReducer
3041

3142
You can use [Discriminated Unions](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions) for reducer actions. Don't forget to define the return type of reducer, otherwise TypeScript will infer it.

‎docs/basic/troubleshooting/types.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,9 @@ Note that you cannot assert your way to anything - basically it is only for refi
137137
You can also assert a property is non-null, when accessing it:
138138

139139
```ts
140-
element.parentNode!.removeChild(element) // ! before the period
141-
myFunction(document.getElementById(dialog.id!)! // ! after the property accessing
142-
let userID!: string // definite assignment assertion... be careful!
140+
element.parentNode!.removeChild(element); // ! before the period
141+
myFunction(document.getElementById(dialog.id!)!); // ! after the property accessing
142+
let userID!: string; // definite assignment assertion... be careful!
143143
```
144144

145145
Of course, try to actually handle the null case instead of asserting :)

‎docs/basic/useful-hooks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function App() {
3737
}
3838

3939
// Hook
40-
function useLocalStorage<T>(key: string, initialValue: T) {
40+
function useLocalStorage<T>(key: string, initialValue: T) : [T, (value: T | ((val: T) => T)) => void] {
4141
// State to store our value
4242
// Pass initial state function to useState so logic is only executed once
4343
const [storedValue, setStoredValue] = useState<T>(() => {

0 commit comments

Comments
 (0)