Update README.md with Troubleshooting Changes (#260)

* Update README.md with Types

Added changes to Troubleshooting types from #254 to README.md

* Update README.md

* fix prettier

Co-authored-by: swyx <[email protected]>

Author: arvindcheenu

Diff for: README.md

@@ -1544,31 +1544,158 @@ let baz2: SubIsntType2 = {
 
 What's more annoying than modules with unexported types? Modules that are **untyped**!
 
-Fret not! It's just a simple two step process.
+Fret not! There are more than a couple of ways in which you can solve this problem.
 
-- Create a new type declaration file, say `typedec.d.ts`– if you don't already have one. Ensure that the path to file is resolvable by Typescript. To do so, check the `include` array in the `tsconfig.json` file at the root of your directory.
+A **lazier** way would be to create a new type declaration file, say `typedec.d.ts`– if you don't already have one. Ensure that the path to file is resolvable by TypeScript by checking the `include` array in the `tsconfig.json` file at the root of your directory.
 
 ```json
 // inside tsconfig.json
 {
-...
-    "include": [
-        "src" // automatically resolves if path to declaration is src/typedec.d.ts
-    ],
-...
+  // ...
+  "include": [
+    "src" // automatically resolves if the path to declaration is src/typedec.d.ts
+  ]
+  // ...
 }
 ```
 
-- Add the `declare` syntax for your desired module, say `my-untyped-module`– to the declaration file.
+Within this file, add the `declare` syntax for your desired module, say `my-untyped-module`– to the declaration file:
 
 ```ts
 // inside typedec.d.ts
 declare module "my-untyped-module";
 ```
 
-This one-line alone is enough if you just need it to work without errors. If you need to, you can include your type definitions inferred from the untyped module's source or docs within curly braces following this declaration.
+This one-liner alone is enough if you just need it to work without errors. A even hackier, write-once-and-forget way would be to use `"*"` instead which would then apply the `Any` type for all existing and future untyped modules.
+
+This solution works well as a workaround if you have less than a couple untyped modules. Anything more, you now have a ticking type-bomb in your hands. The only way of circumventing this problem would be to define the missing types for those untyped modules as explained in the following sections.
+
+### Typing Exported Hooks
+
+Typing Hooks is just like typing pure functions.
+
+The following steps work under two assumptions:
+
+- You have already created a type declaration file as stated earlier in the section.
+- You have access to the source code - specifically the code that directly exports the functions you will be using. In most cases, it would be housed in an `index.js` file.
+  Typically you need a minimum of **two** type declarations (one for **Input Prop** and the other for **Return Prop**) to define a hook completely. Suppose the hook you wish to type follows the following structure,
+
+```js
+// ...
+const useUntypedHook = (prop) => {
+  // some processing happens here
+  return {
+    /* ReturnProps */
+  };
+};
+export default useUntypedHook;
+```
+
+then, your type declaration should most likely follow the following syntax.
+
+```ts
+declare module 'use-untyped-hook' {
+  export interface InputProps { ... }   // type declaration for prop
+  export interface ReturnProps { ... } // type declaration for return props
+  export default function useUntypedHook(
+    prop: InputProps
+    // ...
+  ): ReturnProps;
+}
+```
+
+<details>
+<summary>
+
+For instance, the [useDarkMode hook](https://github.com/donavon/use-dark-mode) exports the functions that follows a similar structure.
+
+</summary>
+
+```js
+// inside src/index.js
+const useDarkMode = (
+  initialValue = false, // -> input props / config props to be exported
+  {
+    // -> input props / config props to be exported
+    element,
+    classNameDark,
+    classNameLight,
+    onChange,
+    storageKey = "darkMode",
+    storageProvider,
+    global,
+  } = {}
+) => {
+  // ...
+  return {
+    // -> return props to be exported
+    value: state,
+    enable: useCallback(() => setState(true), [setState]),
+    disable: useCallback(() => setState(false), [setState]),
+    toggle: useCallback(() => setState((current) => !current), [setState]),
+  };
+};
+export default useDarkMode;
+```
+
+As the comments suggest, exporting these config props and return props following the aforementioned structure will result in the following type export.
+
+```ts
+declare module "use-dark-mode" {
+  /**
+   * A config object allowing you to specify certain aspects of `useDarkMode`
+   */
+  export interface DarkModeConfig {
+    classNameDark?: string; // A className to set "dark mode". Default = "dark-mode".
+    classNameLight?: string; // A className to set "light mode". Default = "light-mode".
+    element?: HTMLElement; // The element to apply the className. Default = `document.body`
+    onChange?: (val?: boolean) => void; // Overide the default className handler with a custom callback.
+    storageKey?: string; // Specify the `localStorage` key. Default = "darkMode". Set to `null` to disable persistent storage.
+    storageProvider?: WindowLocalStorage; // A storage provider. Default = `localStorage`.
+    global?: Window; // The global object. Default = `window`.
+  }
+  /**
+   * An object returned from a call to `useDarkMode`.
+   */
+  export interface DarkMode {
+    readonly value: boolean;
+    enable: () => void;
+    disable: () => void;
+    toggle: () => void;
+  }
+  /**
+   * A custom React Hook to help you implement a "dark mode" component for your application.
+   */
+  export default function useDarkMode(
+    initialState?: boolean,
+    config?: DarkModeConfig
+  ): DarkMode;
+}
+```
+
+</details>
+
+### Typing Exported Components
+
+In case of typing untyped class components, there's almost no difference in approach except for the fact that after declaring the types, you export the extend the type using `class UntypedClassComponent extends React.Component<UntypedClassComponentProps, any> {}` where `UntypedClassComponentProps` holds the type declaration.
+
+For instance, [sw-yx's Gist on React Router 6 types](https://gist.github.com/sw-yx/37a6a3d248c2d4031801f0d568904df8) implemented a similar method for typing the then untyped RR6.
+
+```ts
+declare module "react-router-dom" {
+  import * as React from 'react';
+  // ...
+  type NavigateProps<T> = {
+    to: string | number,
+    replace?: boolean,
+    state?: T
+  }
+  //...
+  export class Navigate<T = any> extends React.Component<NavigateProps<T>>{}
+  // ...
+```
 
-If you're working with untyped class components in React, you can also checkout this [short post](https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components) as a reference.
+For more information on creating type definitions for class components, you can refer to this [post](https://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components) for reference.
 
 # Troubleshooting Handbook: Images and other non-TS/TSX files