diff --git a/ADVANCED.md b/ADVANCED.md
index 0630a9f..f1b662a 100644
--- a/ADVANCED.md
+++ b/ADVANCED.md
@@ -13,6 +13,7 @@
Expand Table of Contents
+- [Section 0: Utility Types](#section-0-utility-types)
- [Section 1: Reusable Components/Type Utilities](#section-1-reusable-componentstype-utilities)
* [Higher Order Components](#higher-order-components-hocs)
* [Render Props](#render-props)
@@ -40,6 +41,88 @@
- [Section 4: @types/react and @types/react-dom APIs](#section-4-typesreact-and-typesreact-dom-apis)
+# Section 0: Utility Types
+
+Handy Utility Types used in the rest of this cheatsheet, or commonly used with React+TS apps, with explanation on what they do and how they can help. We will assume knowledge of [mapped types and conditional types](https://mariusschulz.com/blog/series/typescript-evolution) like `Exclude` and `ReturnType` but try to build progressively upon them.
+
+
+
+ Omit<T, K extends keyof T>
: Subtract keys from one interface from the other.
+
+
+```ts
+/**
+ * Subtract keys from one interface from the other.
+ *
+ * @example
+ * interface One { one: string }
+ * interface Three { one: string, two: string }
+ *
+ * type Two = Omit;
+ *
+ * // The type of Two will be
+ * interface Two { two: string }
+ */
+type Omit = Pick>;
+```
+
+You can also supply string literals to omit:
+
+```ts
+type SettingsPageProps = Omit
+```
+
+
+
+
+
+ Optionalize<T extends K, K>
: Remove from T the keys that are in common with K
+
+
+```ts
+/**
+ * Remove from T the keys that are in common with K
+ */
+type Optionalize = Omit;
+```
+
+ An example usage is in our HOC section below.
+
+
+
+
+ Nullable<T>
or Maybe<T>
: Make a Type into a Maybe Type
+
+
+```ts
+/**
+ * Make a Type into a Maybe Type
+ */
+type Nullable = T | null
+type Maybe = T | undefined
+```
+
+ Your choice of `null` or `undefined` depends on your approach toward missing values. Some folks feel strongly one way or the other.
+
+
+
+
+ Dictionary<T>
: Dictionary of string, value pairs
+
+
+```ts
+/**
+ * Dictionary of string, value pairs
+ */
+type Dictionary = { [key: string]: T }
+```
+
+ `[key: string]` is a very handy trick in general. You can also modify dictionary fields with [Readonly](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html) or make them optional or Omit them, etc.
+
+
+
+[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new). We respect the fact that naming and selection of examples here is arbitrary as the possible space is infinite.
+
# Section 1: Advanced Guides
## Higher Order Components (HoCs)
@@ -88,29 +171,6 @@ Now when consuming the component you can omit the `primaryColor` prop or overrid
**Declaring the HoC**
-The following utilities will be needed.
-
-```ts
-/**
- * Generic type utility to subtract keys from one interface from the other.
- *
- * @example
- * interface One { one: string }
- * interface Three { one: string, two: string }
- *
- * type Two = Omit;
- *
- * // The type of Two will be
- * interface Two { two: string }
- */
-type Omit = Pick>;
-
-/**
- * Remove from T the keys that are in common with K
- */
-type Optionalize = Omit;
-```
-
The actual HoC.
```ts
@@ -222,7 +282,6 @@ function Clickable(props: ButtonProps | AnchorProps) {
They don't even need to be completely different props, as long as they have at least one difference in properties:
```tsx
-type Omit = Pick>
type LinkProps = Omit & { to?: string }
function RouterLink(props: LinkProps): JSX.Element
@@ -242,10 +301,7 @@ function RouterLink(props: LinkProps | AnchorProps) {
Here is an example solution, see the further discussion for other solutions. *thanks to [@jpavon](https://github.com/sw-yx/react-typescript-cheatsheet/issues/12#issuecomment-394440577)*
```tsx
-type Omit = Pick>
-
interface LinkProps {}
-
type AnchorProps = React.AnchorHTMLAttributes
type RouterLinkProps = Omit
@@ -274,8 +330,6 @@ const Link = (
If you want to conditionally render a component, sometimes is better to use [React's composition model](https://reactjs.org/docs/composition-vs-inheritance.html) to have simpler components and better to understand typings:
```tsx
-type Omit = Pick>
-
type AnchorProps = React.AnchorHTMLAttributes
type RouterLinkProps = Omit