Skip to content

Commit

Permalink
Updated README on 2021-04-25T20:13:23.562Z
Browse files Browse the repository at this point in the history
  • Loading branch information
@github-actions
github-actions[bot] authored Apr 25, 2021
1 parent b25df79 commit 21813ac
Showing 1 changed file with 59 additions and 34 deletions.
93 changes: 59 additions & 34 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +158,10 @@
- [Using Partial Types](#using-partial-types)
- [The Types I need weren't exported!](#the-types-i-need-werent-exported)
- [The Types I need don't exist!](#the-types-i-need-dont-exist)
- [Slapping `any` on everything](#slapping-any-on-everything)
- [Autogenerate types](#autogenerate-types)
- [Typing Exported Hooks](#typing-exported-hooks)
- [Typing Exported Components](#typing-exported-components)<!--END-SECTION:types-toc-->
* [Slapping `any` on everything](#slapping-any-on-everything)
* [Autogenerate types](#autogenerate-types)
* [Typing Exported Hooks](#typing-exported-hooks)
* [Typing Exported Components](#typing-exported-components)<!--END-SECTION:types-toc-->
- [Troubleshooting Handbook: Operators](#troubleshooting-handbook-operators)
- [Troubleshooting Handbook: Utilties](#troubleshooting-handbook-utilities)
- [Troubleshooting Handbook: tsconfig.json](#troubleshooting-handbook-tsconfigjson)
Expand All @@ -177,7 +177,6 @@
</details>

<!--START-SECTION:setup-->

# Section 1: Setup TypeScript with React

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

<!--START-SECTION:function-components-->

## Function Components

These can be written as normal functions that take a `props` argument and return a JSX element.
Expand Down Expand Up @@ -384,14 +382,13 @@ const MyArrayComponent = () => (Array(5).fill(<div />) as any) as JSX.Element;
<!--END-SECTION:function-components-->

<!--START-SECTION:hooks-->

## Hooks

Hooks are [supported in `@types/react` from v16.8 up](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L800-L1031).

## useState

Type inference works very well most of the time:
Type inference works very well for simple values:

```tsx
const [val, toggle] = React.useState(false);
Expand All @@ -410,6 +407,17 @@ const [user, setUser] = React.useState<IUser | null>(null);
setUser(newUser);
```

You can also use type assertions if a state is initialized soon after setup and always has a value after:

```tsx
const [user, setUser] = React.useState<IUser>({} as IUser);

// later...
setUser(newUser);
```

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.

## useReducer

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.
Expand Down Expand Up @@ -510,7 +518,7 @@ function DelayedEffect(props: { timerMs: number }) {

## useRef

When using `useRef`, you have three options when creating a ref container that does not have an initial value:
When using `useRef`, you have two options when creating a ref container that does not have an initial value:

```ts
const ref1 = useRef<HTMLElement>(null!);
Expand Down Expand Up @@ -668,7 +676,6 @@ If you are writing a React Hooks library, don't forget that you should also expo
<!--END-SECTION:hooks-->

<!--START-SECTION:class-components-->

## Class Components

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:
Expand Down Expand Up @@ -843,7 +850,6 @@ class Comp extends React.PureComponent<Props, State> {
<!--END-SECTION:class-components-->

<!--START-SECTION:default-props-->

## You May Not Need `defaultProps`

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

<!--START-SECTION:basic-type-examples-->

## Typing Component Props

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

<!--START-SECTION:forms-and-events-->

## Forms and Events

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):
Expand Down Expand Up @@ -1347,7 +1351,7 @@ The first method uses an inferred method signature `(e: React.FormEvent<HTMLInpu

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

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:
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:

```tsx
<form
Expand Down Expand Up @@ -1385,10 +1389,47 @@ If you don't quite care about the type of the event, you can just use React.Synt

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.

### List of event types

| Event Type | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| AnimationEvent | CSS Animations. |
| ChangeEvent | Changing the value of `<input>`, `<select>` and `<textarea>` element. |
| ClipboardEvent | Using copy, paste and cut events. |
| 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) |
| DragEvent | Drag and drop interaction with a pointer device (e.g. mouse). |
| FocusEvent | Event that occurs when elements gets or loses focus. |
| FormEvent | Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted. |
| InvalidEvent | Fired when validity restrictions of an input fails (e.g `<input type="number" max="10">` and someone would insert number 20). |
| KeyboardEvent | User interaction with the keyboard. Each event describes a single key interaction. |
| MouseEvent | Events that occur due to the user interacting with a pointing device (e.g. mouse) |
| 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. |
| TouchEvent | Events that occur due to the user interacting with a touch device. Extends UIEvent. |
| TransitionEvent | CSS Transition. Not fully browser supported. Extends UIEvent |
| UIEvent | Base Event for Mouse, Touch and Pointer events. |
| WheelEvent | Scrolling on a mouse wheel or similar input device. (Note: `wheel` event should not be confused with the `scroll` event) |
| SyntheticEvent | The base event for all above events. Should be used when unsure about event type |

<details>
<summary>

**What about `InputEvent`?**

</summary>

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.

Sources:

- https://github.com/microsoft/TypeScript/issues/29441
- https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

</details>

<!--END-SECTION:forms-and-events-->

<!--START-SECTION:context-->

## Context

## Basic Example
Expand Down Expand Up @@ -1671,7 +1712,6 @@ const Consumer = Context.Consumer;
<!--END-SECTION:context-->

<!--START-SECTION:forward-create-ref-->

## forwardRef/createRef

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

<!--START-SECTION:portals-->

## Portals

Using `ReactDOM.createPortal`:
Expand Down Expand Up @@ -1844,7 +1883,6 @@ This example is based on the [Event Bubbling Through Portal](https://reactjs.org
<!--END-SECTION:portals-->

<!--START-SECTION:error-boundaries-->

## Error Boundaries

### Option 1: Using react-error-boundary
Expand Down Expand Up @@ -1899,7 +1937,6 @@ export default ErrorBoundary;
<!--END-SECTION:error-boundaries-->

<!--START-SECTION:concurrent-->

## Concurrent React/React Suspense

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

<!--START-SECTION:types-->

# Troubleshooting Handbook: Types

> ⚠️ Have you read [the TypeScript FAQ](https://github.com/microsoft/TypeScript/wiki/FAQ?) Your answer might be there!
Expand Down Expand Up @@ -2045,9 +2081,9 @@ Note that you cannot assert your way to anything - basically it is only for refi
You can also assert a property is non-null, when accessing it:

```ts
element.parentNode!.removeChild(element) // ! before the period
myFunction(document.getElementById(dialog.id!)! // ! after the property accessing
let userID!: string // definite assignment assertion... be careful!
element.parentNode!.removeChild(element); // ! before the period
myFunction(document.getElementById(dialog.id!)!); // ! after the property accessing
let userID!: string; // definite assignment assertion... be careful!
```

Of course, try to actually handle the null case instead of asserting :)
Expand Down Expand Up @@ -2455,7 +2491,6 @@ For more information on creating type definitions for class components, you can
<!--END-SECTION:types-->
<!--START-SECTION:operators-->
# Troubleshooting Handbook: Operators
- `typeof` and `instanceof`: type query used for refinement
Expand All @@ -2479,7 +2514,6 @@ Conditional Types are a difficult topic to get around so here are some extra res
<!--END-SECTION:operators-->
<!--START-SECTION:utilities-->
# Troubleshooting Handbook: Utilities
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):
Expand All @@ -2501,7 +2535,6 @@ These are all built in, [see source in es5.d.ts](https://github.com/microsoft/Ty
<!--END-SECTION:utilities-->
<!--START-SECTION:ts-config-->
# Troubleshooting Handbook: tsconfig.json
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`):
Expand Down Expand Up @@ -2553,7 +2586,6 @@ Compilation speed grows linearly with size of codebase. For large projects, you
<!--END-SECTION:ts-config-->
<!--START-SECTION:official-typings-bugs-->
# Troubleshooting Handbook: Fixing bugs in official typings
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`:
Expand Down Expand Up @@ -2620,7 +2652,6 @@ You can see examples of these included in the built in type declarations in the
<!--END-SECTION:official-typings-bugs-->
<!--START-SECTION:non-ts-files-->
# Time to Really Learn TypeScript
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.
Expand All @@ -2642,7 +2673,6 @@ It is worth mentioning some resources to help you get started:
<!--END-SECTION:non-ts-files-->
<!--START-SECTION:resources-->
# Other React + TypeScript resources
- me! <https://twitter.com/swyx>
Expand Down Expand Up @@ -2676,7 +2706,6 @@ It is worth mentioning some resources to help you get started:
<!--END-SECTION:resources-->
<!--START-SECTION:editor-integration-->
# Editor Tooling and Integration
- VSCode
Expand All @@ -2701,7 +2730,6 @@ You may also wish to use alternative logos - [jsx-tsx-logos](https://github.com/
<!--END-SECTION:editor-integration-->
<!--START-SECTION:linting-->
# Linting
> ⚠️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).
Expand Down Expand Up @@ -2832,7 +2860,6 @@ If you're looking for information on Prettier, check out the [Prettier](https://
<!--END-SECTION:other-resources-->
<!--START-SECTION:talks-->
# Recommended React + TypeScript talks
- [Ultimate React Component Patterns with TypeScript](https://www.youtube.com/watch?v=_PBQ3if6Fmg), by Martin Hochel, GeeCon Prague 2018
Expand All @@ -2841,7 +2868,6 @@ If you're looking for information on Prettier, check out the [Prettier](https://
<!--END-SECTION:talks-->
<!--START-SECTION:learn-ts-->
# Time to Really Learn TypeScript
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.
Expand All @@ -2863,7 +2889,6 @@ It is worth mentioning some resources to help you get started:
<!--END-SECTION:learn-ts-->
<!--START-SECTION:examples-->
# Example App
- [Create React App TypeScript Todo Example 2020](https://github.com/laststance/create-react-app-typescript-todo-example-2020)
Expand Down

0 comments on commit 21813ac

Please sign in to comment.