fix format

.github/ISSUE_TEMPLATE/general-react-ts-question.md

@@ -6,8 +6,6 @@ labels: good first issue
 assignees: sw-yx
 ---
 
-
-
 **(If applicable) Reproduction of issue in TypeScript Playground**
 
 _[start with the basic TS + React template](https://www.typescriptlang.org/play/?jsx=2&esModuleInterop=true&q=222#example/typescript-with-react)_

CONTRIBUTORS.md

@@ -17,6 +17,7 @@
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

README.md

@@ -62,9 +62,9 @@
 
 - [Section 1: Setup](#section-1-setup)
   <!--START-SECTION:setup-toc-->
-	- [Prerequisites](#prerequisites)
-	- [React + TypeScript Starter Kits](#react--typescript-starter-kits)
-	- [Import React](#import-react)<!--END-SECTION:setup-toc-->
+      	- [Prerequisites](#prerequisites)
+      	- [React + TypeScript Starter Kits](#react--typescript-starter-kits)
+      	- [Import React](#import-react)<!--END-SECTION:setup-toc-->
 - [Section 2: Getting Started](#section-2-getting-started)
   - [Function Components](#function-components)
   - [Hooks](#hooks)
@@ -82,17 +82,17 @@
   - [Concurrent React/React Suspense](#concurrent-reactreact-suspense)
 - [Basic Troubleshooting Handbook: Types](#basic-troubleshooting-handbook-types)
   <!--START-SECTION:types-toc-->
-	- [Union Types and Type Guarding](#union-types-and-type-guarding)
-	- [Optional Types](#optional-types)
-	- [Enum Types](#enum-types)
-	- [Type Assertion](#type-assertion)
-	- [Simulating Nominal Types](#simulating-nominal-types)
-	- [Intersection Types](#intersection-types)
-	- [Union Types](#union-types)
-	- [Overloading Function Types](#overloading-function-types)
-	- [Using Inferred Types](#using-inferred-types)
-	- [Using Partial Types](#using-partial-types)
-	- [The Types I need weren't exported!](#the-types-i-need-werent-exported)
+      	- [Union Types and Type Guarding](#union-types-and-type-guarding)
+      	- [Optional Types](#optional-types)
+      	- [Enum Types](#enum-types)
+      	- [Type Assertion](#type-assertion)
+      	- [Simulating Nominal Types](#simulating-nominal-types)
+      	- [Intersection Types](#intersection-types)
+      	- [Union Types](#union-types)
+      	- [Overloading Function Types](#overloading-function-types)
+      	- [Using Inferred Types](#using-inferred-types)
+      	- [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)<!--END-SECTION:types-toc-->
 - [Troubleshooting Handbook: Operators](#troubleshooting-handbook-operators)
 - [Troubleshooting Handbook: Utilties](#troubleshooting-handbook-utilities)
@@ -109,6 +109,7 @@
   </details>
 
 <!--START-SECTION:setup-->
+
 # Section 1: Setup
 
 ## Prerequisites
@@ -160,6 +161,7 @@ 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.
@@ -239,6 +241,7 @@ 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).
@@ -476,6 +479,7 @@ Example React Hooks + TypeScript Libraries:
 <!--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:
@@ -586,6 +590,7 @@ class App extends React.Component<{
 <!--END-SECTION:class-components-->
 
 <!--START-SECTION:default-props-->
+
 ## Typing defaultProps
 
 For TypeScript 3.0+, type inference [should work](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html), although [some edge cases are still problematic](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/61). Just type your props like normal, except don't use `React.FC`.
@@ -717,6 +722,7 @@ The problem with this approach is it causes complex issues with the type inferen
 <!--END-SECTION:default-props-->
 
 <!--START-SECTION:type-or-interface-->
+
 ## Types or Interfaces?
 
 `interface`s are different from `type`s in TypeScript, but they can be used for very similar things as far as common React uses cases are concerned. Here's a helpful rule of thumb:
@@ -744,6 +750,7 @@ It's a nuanced topic, don't get too hung up on it. Here's a handy graphic:
 <!--END-SECTION:type-or-interface-->
 
 <!--START-SECTION:basic-type-examples-->
+
 ## Basic Prop Types Examples
 
 ```tsx
@@ -786,6 +793,7 @@ Notice we have used the TSDoc `/** comment */` style here on each prop. You can
 <!--END-SECTION:basic-type-examples-->
 
 <!--START-SECTION:react-prop-type-examples-->
+
 ## Useful React Prop Type Examples
 
 ```tsx
@@ -819,6 +827,7 @@ Quote [@ferdaber](https://github.com/typescript-cheatsheets/react-typescript-che
 <!--END-SECTION:react-prop-type-examples-->
 
 <!--START-SECTION:get-derived-state-from-props-->
+
 ## getDerivedStateFromProps
 
 Before you start using `getDerivedStateFromProps`, please go through the [documentation](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops) and [You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html). Derived State can be easily achieved using hooks which can also help set up memoization easily.
@@ -886,6 +895,7 @@ 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, 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):
@@ -990,6 +1000,7 @@ Of course, if you're making any sort of significant form, [you should use Formik
 <!--END-SECTION:forms-and-events-->
 
 <!--START-SECTION:context-->
+
 ## Context
 
 Using `React.createContext` with an empty object as default value.
@@ -1228,6 +1239,7 @@ 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`.
@@ -1266,6 +1278,7 @@ You may also wish to do [Conditional Rendering with `forwardRef`](https://github
 <!--END-SECTION:forward-create-ref-->
 
 <!--START-SECTION:portals-->
+
 ## Portals
 
 Using `ReactDOM.createPortal`:
@@ -1304,6 +1317,7 @@ This example is based on the [Event Bubbling Through Portal](https://reactjs.org
 <!--END-SECTION:portals-->
 
 <!--START-SECTION:error-boundaries-->
+
 ## Error Boundaries
 
 _Not written yet._
@@ -1313,6 +1327,7 @@ _Not written yet._
 <!--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.
@@ -1322,6 +1337,7 @@ _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!
@@ -2009,6 +2025,7 @@ Use [declaration merging](https://www.typescriptlang.org/docs/handbook/declarati
 <!--END-SECTION:types-->
 
 <!--START-SECTION:operators-->
+
 # Troubleshooting Handbook: Operators
 
 - `typeof` and `instanceof`: type query used for refinement
@@ -2031,6 +2048,7 @@ 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):
@@ -2054,6 +2072,7 @@ This section needs writing, but you can probably find a good starting point with
 <!--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/v2/en/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`):
@@ -2103,6 +2122,7 @@ Compilation speed grows linearly with size of codebase. For large projects, you
 <!--END-SECTION:ts-config-->
 
 <!--START-SECTION:official-typings-bugs-->
+
 # Troubleshooting Handbook: 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`:
@@ -2169,6 +2189,7 @@ 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-->
+
 # Troubleshooting Handbook: Images and other non-TS/TSX files
 
 Use [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html):
@@ -2189,6 +2210,7 @@ Related issue: https://github.com/Microsoft/TypeScript-React-Starter/issues/12 a
 <!--END-SECTION:non-ts-files-->
 
 <!--START-SECTION:resources-->
+
 # Recommended React + TypeScript codebases to learn from
 
 - https://github.com/jaredpalmer/formik
@@ -2218,6 +2240,7 @@ React Native Boilerplates: _contributed by [@spoeck](https://github.com/typescri
 <!--END-SECTION:resources-->
 
 <!--START-SECTION:editor-integration-->
+
 # Editor Tooling and Integration
 
 - VSCode
@@ -2234,6 +2257,7 @@ React Native Boilerplates: _contributed by [@spoeck](https://github.com/typescri
 <!--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).
@@ -2340,6 +2364,7 @@ If you're looking for information on Prettier, check out the [Prettier](https://
 <!--END-SECTION:linting-->
 
 <!--START-SECTION:other-resources-->
+
 # Other React + TypeScript resources
 
 - me! <https://twitter.com/swyx>
@@ -2360,13 +2385,15 @@ 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
 - Please help contribute this new section!
 <!--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. There is a whole world of generic type logic that you will eventually get into, however it becomes far less dealing with React than just getting good at TypeScript so it is out of scope here. But at least you can get productive in React now :)
@@ -2383,6 +2410,7 @@ 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)