### Install Prettier, Husky, and lint-staged for React Projects

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/misc-concerns.md

Installs the necessary development dependencies for code formatting and pre-commit hooks in a React project using npm or yarn.

```bash
$ yarn add -D prettier husky lint-staged
```

--------------------------------

### Configure TypeScript Project References

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_version.md

Provides configuration examples for tsconfig.json to enable project references, allowing large codebases to be split into smaller, independently compilable subprojects.

```json
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "rootDir": "."
  },
  "include": ["./**/*.ts"],
  "references": [
    { "path": "../myreferencedproject", "prepend": true }
  ]
}
```

--------------------------------

### Install and Use dts-gen for Autogenerating Types

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/troubleshooting/types.md

This bash command demonstrates how to install the 'dts-gen' tool globally and then use it to generate TypeScript declaration files for a given module. This is useful when TypeScript's `--allowJs` and `--declaration` flags are insufficient.

```bash
npm install -g dts-gen
dts-gen -m <your-module>
```

--------------------------------

### Install ESLint and TypeScript ESLint Dependencies

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/linting.md

Installs the necessary ESLint packages and TypeScript ESLint plugins for your project using Yarn. These are development dependencies.

```bash
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint
```

--------------------------------

### Modal Component Usage Example

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates how to use the Modal component in a React application. It includes state management to control modal visibility and provides a basic structure for modal content and a close button. Assumes the existence of a 'modal-root' div in the static HTML.

```tsx
import { useState } from "react";

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      {/* you can also put this in your static html file */}
      <div id="modal-root"></div>
      {showModal && (
        <Modal>
          <div
            style={{
              display: "grid",
              placeItems: "center",
              height: "100vh",
              width: "100vh",
              background: "rgba(0,0,0,0.1)",
              zIndex: 99,
            }}
          >
            I'm a modal!{" "}
            <button
              style={{ background: "papyawhip" }}
              onClick={() => setShowModal(false)}
            >
              close
            </button>
          </div>
        </Modal>
      )}
      <button onClick={() => setShowModal(true)}>show Modal</button>
      {/* rest of your app */}
    </div>
  );
}
```

--------------------------------

### Modal Component Usage Example

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/portals.md

Demonstrates how to use the Modal component in a React application. It includes state management to control modal visibility and provides a basic structure for the modal content and a button to trigger its display.

```tsx
import { useState } from "react";

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      // you can also put this in your static html file
      <div id="modal-root"></div>
      {showModal && (
        <Modal>
          <div
            style={{
              display: "grid",
              placeItems: "center",
              height: "100vh",
              width: "100vh",
              background: "rgba(0,0,0,0.1)",
              zIndex: 99,
            }}
          >
            I'm a modal!{" "}
            <button
              style={{ background: "papyawhip" }}
              onClick={() => setShowModal(false)}
            >
              close
            </button>
          </div>
        </Modal>
      )}
      <button onClick={() => setShowModal(true)}>show Modal</button>
      // rest of your app
    </div>
  );
}
```

--------------------------------

### Legacy forwardRef Pattern (React 18 and earlier)

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates the use of forwardRef to pass refs to child components. Includes examples of both mutable and immutable ref typing.

```tsx
import { forwardRef, ReactNode, Ref } from "react";

interface Props {
  children?: ReactNode;
  type: "submit" | "button";
}

export const FancyButton = forwardRef(
  (props: Props, ref: Ref<HTMLButtonElement>) => (
    <button ref={ref} className="MyClassName" type={props.type}>
      {props.children}
    </button>
  )
);
```

--------------------------------

### Define Component Props and Structure

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/hoc/excluding-props.md

Example of standard React components that require an 'owner' prop, which will eventually be injected by a Higher-Order Component.

```tsx
type DogProps = {
  name: string
  owner: string
}
function Dog({name, owner}: DogProps) {
  return <div> Woof: {name}, Owner: {owner}</div>
}

type CatProps = {
  lives: number;
  owner: string;
};
function Cat({ lives, owner }: CatProps) {
  return (
    <div>
      Meow: {lives}, Owner: {owner}
    </div>
  );
}
```

--------------------------------

### Base HOC Example with React and TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/hoc/index.md

A foundational Higher Order Component (HOC) example written in React and TypeScript. This HOC wraps a given component, optionally memoizes it, and enhances its display name for React DevTools. It supports custom prop comparison for memoization and aims to provide type safety.

```typescript
type PropsAreEqual<P> = (
  prevProps: Readonly<P>,
  nextProps: Readonly<P>
) => boolean;

const withSampleHoC = <P extends {}>(
  component: { 
    (props: P): Exclude<React.ReactNode, undefined>; 
    displayName?: string;
  },
  propsAreEqual?: PropsAreEqual<P> | false,

  componentName = component.displayName ?? component.name
): { 
  (props: P): React.JSX.Element;
  displayName: string;
} => {

  function WithSampleHoc(props: P) {
    //Do something special to justify the HoC.
    return component(props) as React.JSX.Element;
  }

  WithSampleHoc.displayName = `withSampleHoC(${componentName})`;

  let wrappedComponent = propsAreEqual === false ? WithSampleHoc : React.memo(WithSampleHoc, propsAreEqual);

  //copyStaticProperties(component, wrappedComponent);

  return wrappedComponent as typeof WithSampleHoc
};
```

--------------------------------

### Component Usage with Injected Props (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/hoc/full-example.md

Shows how a React component is defined to accept injected props from an HOC. It extends a base props interface with the injected props and demonstrates their usage within the component.

```typescript
interface Props extends WithThemeProps {
  children?: React.ReactNode;
}

class MyButton extends React.Component<Props> {
  public render() {
    // Render an the element using the theme and other props.
  }

  private someInternalMethod() {
    // The theme values are also available as props here.
  }
}

export default withTheme(MyButton);
```

--------------------------------

### Generic Component with Manual Ref Handling

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/forward-create-ref.md

Provides an example of a generic React component (`ClickableList`) where the ref is manually passed as a prop. This approach is necessary because TypeScript cannot automatically infer refs for generic components.

```tsx
interface ClickableListProps<T> {
  items: T[];
  onSelect: (item: T) => void;
  mRef?: React.Ref<HTMLUListElement> | null;
}

export function ClickableList<T>(props: ClickableListProps<T>) {
  return (
    <ul ref={props.mRef}>
      {props.items.map((item, i) => (
        <li key={i}>
          <button onClick={() => props.onSelect(item)}>Select</button>
          {item}
        </li>
      ))}
    </ul>
  );
}
```

--------------------------------

### Redux Reducer Typing with TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/hooks.md

Shows how to integrate the `useReducer` example with the `Reducer` type from the `redux` library. This helper simplifies type management for reducer functions.

```tsx
import { Reducer } from 'redux';

export function reducer: Reducer<AppState, Action>() {}
```

--------------------------------

### Creating Anchor and Link Buttons in React with TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Defines `AnchorButton` and `LinkButton` components using React and TypeScript. `AnchorButton` renders an 'a' tag, while `LinkButton` renders a `NavLink`. Includes examples of their usage and a note on potential type errors.

```typescript
const AnchorButton: React.FunctionComponent<AnchorProps> = (props) => (
  <Button as="a" {...props} />
);

const LinkButton: React.FunctionComponent<RouterLinkProps> = (props) => (
  <Button as={NavLink} {...props} />
);

<LinkButton to="/login">Login</LinkButton>;
<AnchorButton href="/login">Login</AnchorButton>;
<AnchorButton href="/login" to="/test">
  Login
</AnchorButton>; // Error: Property 'to' does not exist on type...
```

--------------------------------

### Using Discriminated Unions with React Hooks in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Demonstrates how Discriminated Unions can be effectively used with React hooks, specifically `useMemo`. The example shows a `Sequence` component that adapts its rendering based on a union prop (`Props`). TypeScript correctly infers and updates the type of the `value` dependency in `useMemo` as the `isArray` property changes.

```typescript
import { useMemo } from "react";

interface SingleElement {
  isArray: true;
  value: string[];
}
interface MultiElement {
  isArray: false;
  value: string;
}
type Props = SingleElement | MultiElement;

function Sequence(p: Props) {
  return useMemo(
    () => (
      <div>
        value(s):
        {p.isArray && p.value.join(",")}
        {!p.isArray && p.value}
      </div>
    ),
    [p.isArray, p.value] // TypeScript automatically matches the corresponding value type based on dependency change
  );
}

function App() {
  return (
    <div>
      <Sequence isArray={false} value={"foo"} />
      <Sequence isArray={true} value={["foo", "bar", "baz"]} />
    </div>
  );
}
```

--------------------------------

### Using useRef for DOM element refs in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/hooks.md

Explains how to use `useRef` to get a reference to a DOM element in React with TypeScript. It covers providing a specific HTML element type and `null` as the initial value, resulting in a read-only `RefObject`. The example shows how to access the DOM element and the importance of checking for `null` before use, or using the non-null assertion operator `!` with caution.

```tsx
function Foo() {
  // - If possible, prefer as specific as possible. For example, HTMLDivElement
  //   is better than HTMLElement and way better than Element.
  // - Technical-wise, this returns RefObject<HTMLDivElement>
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Note that ref.current may be null. This is expected, because you may
    // conditionally render the ref-ed element, or you may forget to assign it
    if (!divRef.current) throw Error("divRef is not assigned");

    // Now divRef.current is sure to be HTMLDivElement
    doSomethingWith(divRef.current);
  });

  // Give the ref to an element so React can manage it for you
  return <div ref={divRef}>etc</div>;
}
```

```tsx
const divRef = useRef<HTMLDivElement>(null!);
// Later... No need to check if it is null
doSomethingWith(divRef.current);
```

--------------------------------

### Defining Enum Alternatives and Usage

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates the recommended approach of using string literal union types instead of enums, and shows how to define string-based enums if necessary.

```tsx
export declare type Position = "left" | "right" | "top" | "bottom";

export enum ButtonSizes {
  default = "default",
  small = "small",
  large = "large",
}

// usage
export const PrimaryButton = (
  props: Props & React.HTMLProps<HTMLButtonElement>
) => <Button size={ButtonSizes.default} {...props} />;
```

--------------------------------

### Declaring Untyped Modules

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Shows how to configure tsconfig.json to include custom declaration files and how to use the 'declare module' syntax to suppress errors for third-party libraries lacking type definitions.

```json
{
  "include": ["src"]
}
```

```typescript
declare module "my-untyped-module";
```

--------------------------------

### Implementing Polymorphic Components

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Shows how to use React.ElementType to create components that can render as different HTML tags or other components via an 'as' prop.

```tsx
function PassThrough(props: { as: React.ElementType<any> }) {
  const { as: Component } = props;

  return <Component />;
}

const PrivateRoute = ({ component: Component, ...rest }: PrivateRouteProps) => {
  const { isLoggedIn } = useAuth();

  return isLoggedIn ? <Component {...rest} /> : <Redirect to="/" />;
};
```

--------------------------------

### Implementing Default Props with ES6 Defaults

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Shows how to replace deprecated defaultProps by using standard JavaScript default parameter values in functional and class components.

```tsx
type GreetProps = { age?: number };

const Greet = ({ age = 21 }: GreetProps) => // etc
```

```tsx
type GreetProps = {
  age?: number;
};

class Greet extends React.Component<GreetProps> {
  render() {
    const { age = 21 } = this.props;
    /*...*/
  }
}

let el = <Greet age={3} />;
```

--------------------------------

### Incorrect Prop Extension Patterns

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Examples of patterns to avoid, such as using HTMLProps or HTMLAttributes, which can lead to overly broad type inference or missing standard attributes.

```tsx
// Avoid: HTMLProps infers too-wide types
export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
  specialProp: string;
}

// Avoid: HTMLAttributes lacks standard element props like 'type'
export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {}
```

--------------------------------

### Create and Consume React Context with TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/context.md

Demonstrates the standard pattern for creating a typed context, wrapping components in a Provider, and consuming the state using the useContext hook.

```tsx
import { createContext, useState, useContext } from "react";

type ThemeContextType = "light" | "dark";
const ThemeContext = createContext<ThemeContextType>("light");

const App = () => {
  const [theme, setTheme] = useState<ThemeContextType>("light");
  return (
    <ThemeContext.Provider value={theme}>
      <MyComponent />
    </ThemeContext.Provider>
  );
};

const MyComponent = () => {
  const theme = useContext(ThemeContext);
  return <p>The current theme is {theme}.</p>;
};
```

--------------------------------

### Typing useDarkMode Hook in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Provides specific type definitions for the 'useDarkMode' React hook, including its configuration options and the returned values. This example illustrates the practical application of typing exported hooks.

```javascript
// 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;
```

```typescript
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; // Override 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;
}
```

--------------------------------

### Wrapping and Mirroring Components

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Demonstrates how to wrap a component and extend its props using a custom utility type to infer props from the underlying component.

```tsx
import { CSSProperties } from "react";

const Box = (props: CSSProperties) => <div style={props} />;

const Card = (
  { title, children, ...props }: { title: string } & $ElementProps<typeof Box>
) => (
  <Box {...props}>
    {title}: {children}
  </Box>
);
```

--------------------------------

### Define Injected Props Interface (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/hoc/full-example.md

Defines the interface for props that will be injected by the HOC. This helps in type safety and clarity for the props being added to the wrapped component.

```typescript
interface WithThemeProps {
  primaryColor: string;
}
```

--------------------------------

### React.FunctionComponent vs. Standard Function Components

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Illustrates the difference between using React.FunctionComponent and a standard function declaration for React components. It highlights that React.FunctionComponent explicitly defines the return type and supports static properties, though it was previously implicitly defined children.

```tsx
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

// Before React 18 types, React.FunctionComponent implicitly defined children:
const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title,
}) => <div title={title}>{children}</div>;
```

--------------------------------

### Class Component Ref with createRef

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/forward-create-ref.md

Shows how to use `createRef` within a React class component to get a reference to a DOM element. This is the standard way to handle refs in class-based components.

```tsx
import { createRef, PureComponent } from "react";

// Assuming Props is defined elsewhere
// interface Props { children?: React.ReactNode; }

class CssThemeProvider extends PureComponent<Props> {
  private rootRef = createRef<HTMLDivElement>();

  render() {
    return <div ref={this.rootRef}>{this.props.children}</div>;
  }
}
```

--------------------------------

### Polymorphic Router Links

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Demonstrates how to handle custom props alongside standard HTML attributes by omitting specific keys and using type guards to switch between components.

```tsx
type LinkProps = Omit<React.JSX.IntrinsicElements["a"], "href"> & {
  to?: string;
};

function RouterLink(props: LinkProps | AnchorProps) {
  if ("href" in props) {
    return <a {...props} />;
  } else {
    return <Link {...props} />;
  }
}
```

--------------------------------

### Define Optional Component Props

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/troubleshooting/types.md

Illustrates how to define optional props using the question mark syntax and how to assign default values during destructuring in a React component.

```tsx
class MyComponent extends React.Component<{
  message?: string;
}> {
  render() {
    const { message = "default" } = this.props;
    return <div>{message}</div>;
  }
}
```

--------------------------------

### Define ambient module declarations

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/troubleshooting/official-typings-bugs.md

Declares a module as 'any' to bypass type checking for libraries without available definitions. This serves as a quick start for projects where full type coverage is not immediately required.

```typescript
// my-typings.ts
declare module "plotly.js"; // each of its imports are `any`
```

--------------------------------

### React 19+ Input with Inherited Props and Ref

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/forward-create-ref.md

Demonstrates how to create a reusable input component in React 19+ that accepts all native input props and a ref. It utilizes `ComponentPropsWithRef` for type safety and ease of use.

```tsx
import { ComponentPropsWithRef, useRef } from "react";

function MyInput(props: ComponentPropsWithRef<"input">) {
  return <input {...props} />;
}

// Usage in parent component
function Parent() {
  const inputRef = useRef<HTMLInputElement>(null);

  return <MyInput ref={inputRef} placeholder="Type here..." />;
}
```

--------------------------------

### Configure Prettier, Husky, and lint-staged in package.json

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/misc-concerns.md

Sets up Prettier for code formatting, Husky for pre-commit hooks, and lint-staged to run Prettier on staged files before committing. This ensures consistent code style across the project.

```json
// inside package.json
{
  //...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "src/*.{ts,tsx,js,jsx,css,scss,md}": [
        "prettier --trailing-comma es5 --single-quote --write",
        "git add"
      ],
      "ignore": ["**/dist/*, **/node_modules/*"]
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "es5"
  }
}
```

--------------------------------

### Handle Default Props with React.FC in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates how to correctly define default props for React components using TypeScript, especially when using `React.FC`. It addresses issues with `defaultProps` and `React.JSX.LibraryManagedAttributes` for older TypeScript versions.

```typescript
type Props = Required<typeof MyComponent.defaultProps> & {
  /* additional props here */
};

export class MyComponent extends React.Component<Props> {
  static defaultProps = {
    foo: "foo",
  };
}
```

```typescript
interface IMyComponentProps {
  firstProp?: string;
  secondProp: IPerson[];
}

export class MyComponent extends React.Component<IMyComponentProps> {
  public static defaultProps: Partial<IMyComponentProps> = {
    firstProp: "default",
  };
}
```

--------------------------------

### useReducer with Discriminated Unions in React

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/hooks.md

Illustrates using the `useReducer` hook in React with TypeScript, employing discriminated unions for action types. It emphasizes defining the reducer's return type to avoid inference issues and provides a complete example.

```tsx
import { useReducer } from "react";

const initialState = { count: 0 };

type ACTIONTYPE =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: string };

function reducer(state: typeof initialState, action: ACTIONTYPE) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - Number(action.payload) };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
        -
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
    </>
  );
}
```

--------------------------------

### Basic ESLint Configuration for TypeScript Libraries (.eslintrc.js)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/linting.md

A foundational ESLint configuration file for TypeScript libraries. It sets up the environment, extends recommended rules, specifies the TypeScript parser, and defines custom rules for indentation, line endings, quotes, and unused variables.

```javascript
module.exports = {
  env: {
    es6: true,
    node: true,
    jest: true,
  },
  extends: "eslint:recommended",
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module",
  },
  rules: {
    indent: ["error", 2],
    "linebreak-style": ["error", "unix"],
    quotes: ["error", "single"],
    "no-console": "warn",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      { vars: "all", args: "after-used", ignoreRestSiblings: false },
    ],
    "@typescript-eslint/explicit-function-return-type": "warn", // Consider using explicit annotations for object literals and function return types even when they can be inferred.
    "no-empty": "warn",
  },
};
```

--------------------------------

### Function as Child Render Prop Type (TypeScript/React)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Define the type for a render prop that accepts a function as its child. This pattern is useful for passing down state or callbacks to child components. The example shows an interface where `children` is a function that returns `ReactNode`.

```typescript
import { ReactNode } from "react";

interface Props {
  children: (foo: string) => ReactNode;
}
```

--------------------------------

### Typing Exported Hooks in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates how to define type declarations for React hooks, including input props and return props. This approach assumes you have a type declaration file and access to the hook's source code, typically found in an index.js file.

```typescript
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;
}
```

```javascript
// ...
const useUntypedHook = (prop) => {
  // some processing happens here
  return {
    /* ReturnProps */
  };
};
export default useUntypedHook;
```

--------------------------------

### Typing getDerivedStateFromProps to Determine State Type (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/class-components.md

This example shows how to infer the component's state type directly from the return type of `getDerivedStateFromProps`. This approach is dynamic and ensures the state type always matches what the method returns.

```tsx
class Comp extends React.Component<
  Props,
  ReturnType<typeof Comp["getDerivedStateFromProps"]>
> {
  static getDerivedStateFromProps(props: Props) {}
}
```

--------------------------------

### Wrapping HTML Elements with ComponentPropsWithoutRef

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Demonstrates how to create a wrapper component that inherits native HTML element props while adding custom properties. This approach ensures type safety for standard attributes like 'type'.

```tsx
export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
  specialProp?: string;
}
export function Button(props: ButtonProps) {
  const { specialProp, ...rest } = props;
  // do something with specialProp
  return <button {...rest} />;
}
```

--------------------------------

### Helper Function for Tuple Typing and Custom Hook Example (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/hooks.md

Provides a `tuplify` helper function to correctly type tuples and demonstrates its use within a custom hook (`useTuple`). This contrasts with a standard hook (`useArray`) that would infer a union type.

```typescript
import { useRef } from "react";

function tuplify<T extends any[]>(...elements: T) {
  return elements;
}

function useArray() {
  const numberValue = useRef(3).current;
  const functionValue = useRef(() => {}).current;
  return [numberValue, functionValue]; // type is (number | (() => void))[]
}

function useTuple() {
  const numberValue = useRef(3).current;
  const functionValue = useRef(() => {}).current;
  return tuplify(numberValue, functionValue); // type is [number, () => void]
}
```

--------------------------------

### Extract Component Prop Types (TypeScript/React)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Easily extract the prop types of a React component using `React.ComponentProps`. This is useful when you need to define props for a component whose types are not directly exported. The example shows how to define default props for a Modal component.

```typescript
// a Modal component defined elsewhere
const defaultProps: React.ComponentProps<typeof Modal> = {
  title: "Hello World",
  visible: true,
  onClick: jest.fn(),
};
```

--------------------------------

### Create React Portal with Hooks

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/portals.md

Implements a React Modal component using ReactDOM.createPortal within a functional component with hooks. It uses useRef to create and manage a DOM element, appending and removing it from the modal root via useEffect. Assumes a div with id 'modal-root' exists in the HTML.

```tsx
import { useEffect, useRef, ReactNode } from "react";
import { createPortal } from "react-dom";

const modalRoot = document.querySelector("#modal-root") as HTMLElement;

type ModalProps = {
  children: ReactNode;
};

function Modal({ children }: ModalProps) {
  // create div element only once using ref
  const elRef = useRef<HTMLDivElement | null>(null);
  if (!elRef.current) elRef.current = document.createElement("div");

  useEffect(() => {
    const el = elRef.current!; // non-null assertion because it will never be null
    modalRoot.appendChild(el);
    return () => {
      modalRoot.removeChild(el);
    };
  }, []);

  return createPortal(children, elRef.current);
}
```

--------------------------------

### Declare Class Properties for Later Use in TypeScript React

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/class-components.md

Illustrates how to declare class properties in a React component using TypeScript that are intended for later use, such as within lifecycle methods. The example shows declaring a `pointer` property and assigning it in `componentDidMount`.

```tsx
class App extends React.Component<{
  message: string;
}> {
  pointer: number; // like this
  componentDidMount() {
    this.pointer = 3;
  }
  render() {
    return (
      <div>
        {this.props.message} and {this.pointer}
      </div>
    );
  }
}
```

--------------------------------

### User-Defined Type Guard Function in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Provides a simple example of a user-defined type guard function in TypeScript. The `isString` function checks if a given value is a string and returns a type predicate (`a is string`), which TypeScript can use for type narrowing within conditional blocks.

```typescript
function isString(a: unknown): a is string {
  return typeof a === "string";
}
```

--------------------------------

### TypeScript: Understanding Empty Interface, '{}', and 'Object'

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates that `interface {}`, `{}`, and `Object` in TypeScript all represent non-nullish values, not empty objects. Using these types can lead to misunderstandings and is generally discouraged.

```typescript
interface AnyNonNullishValue {}

let value: AnyNonNullishValue;

// these are all fine, but might not be expected
value = 1;
value = "foo";
value = () => alert("foo");
value = {};
value = { foo: "bar" };

// these are errors
value = undefined;
value = null;
```

--------------------------------

### Using PropTypes for Child Validation when TypeScript is Insufficient

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Provides a fallback mechanism using the `prop-types` library for validating the structure of children when TypeScript's static typing capabilities are limited. This example shows how to define prop types for nested child component props.

```javascript
Parent.propTypes = {
  children: PropTypes.shape({
    props: PropTypes.shape({
      // could share `propTypes` to the child
      value: PropTypes.string.isRequired,
    }),
  }).isRequired,
};
```

--------------------------------

### Apply Type Assertions

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/troubleshooting/types.md

Illustrates using the 'as' keyword to narrow types and the non-null assertion operator (!) to inform the compiler about specific type constraints.

```tsx
class MyComponent extends React.Component<{
  message: string;
}> {
  render() {
    const { message } = this.props;
    return (
      <Component2 message={message as SpecialMessageType}>{message}</Component2>
    );
  }
}

element.parentNode!.removeChild(element);
myFunction(document.getElementById(dialog.id!)!);
let userID!: string;
```

--------------------------------

### Restrict React Children Types

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/troubleshooting/types.md

An example demonstrating the limitation where TypeScript fails to restrict specific component types like MenuItem or MenuLink inside a Menu component. Attempting to pass invalid elements like a div will not trigger a compile-time error in standard React/TypeScript configurations.

```tsx
<Menu>
  <MenuItem/>
  <MenuLink/>
  <div>
</Menu>
```

--------------------------------

### Function Overloading in TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/README.md

Demonstrates how to define overloaded function types in TypeScript, both with and without an implementation. This is useful for creating functions that can be called with different argument types and return different results.

```typescript
type FunctionType1 = (x: string, y: number) => number;

function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x): any {
  // implementation with combined signature
  // ...
}

type pickCard = {
  (x: { suit: string; card: number }[]): number;
  (x: number): { suit: string; card: number };
  // no need for combined signature in this form
  // you can also type static properties of functions here eg `pickCard.wasCalled`
};
```

--------------------------------

### Implement a Dynamic Injector HOC (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/hoc/full-example.md

This HOC, named `inject`, allows for injecting static values into a component. It takes the component and an `injector` object containing the props to be injected. The returned component accepts props excluding the injected ones, ensuring type safety.

```typescript
// inject static values to a component so that they're always provided
export function inject<TProps, TInjectedKeys extends keyof TProps>(
  Component: React.JSXElementConstructor<TProps>,
  injector: Pick<TProps, TInjectedKeys>
) {
  return function Injected(props: Omit<TProps, TInjectedKeys>) {
    return <Component {...(props as TProps)} {...injector} />;
  };
}
```

--------------------------------

### Implement Class Methods with Typed Arguments in TypeScript React

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/class-components.md

Shows how to define class methods within a React component using TypeScript, ensuring that any arguments passed to these methods are also properly typed. This example includes an `increment` method that updates the component's state.

```tsx
class App extends React.Component<{ message: string }, { count: number }> {
  state = { count: 0 };
  render() {
    return (
      <div onClick={() => this.increment(1)}>
        {this.props.message} {this.state.count}
      </div>
    );
  }
  increment = (amt: number) => {
    // like this
    this.setState((state) => ({
      count: state.count + amt,
    }));
  };
}
```

--------------------------------

### Implement Typed Rest Parameters

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_version.md

Demonstrates the use of rest parameters to accept a variable number of arguments of a specific type in a function.

```typescript
function foo(...rest: string[]) {
  // ...
}

foo("hello");
foo("hello", "world");
```

--------------------------------

### Omit Props from Intersected Types (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Learn how to omit specific props from a type when intersecting it with another, useful for avoiding prop conflicts. This example demonstrates omitting the 'label' prop from `React.HTMLProps<HTMLInputElement>` to define a custom 'label' prop for a Checkbox component. It leverages the built-in `Omit` utility type.

```typescript
export interface Props {
  label: React.ReactNode; // this will conflict with the InputElement's label
}

// this comes inbuilt with TS 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

// usage
export const Checkbox = (
  props: Props & Omit<React.HTMLProps<HTMLInputElement>, "label">
) => {
  const { label } = props;
  return (
    <div className="Checkbox">
      <label className="Checkbox-label">
        <input type="checkbox" {...props} />
      </label>
      <span>{label}</span>
    </div>
  );
};
```

```typescript
export interface Props {
  label: React.ReactNode; // conflicts with the InputElement's label
  onChange: (text: string) => void; // conflicts with InputElement's onChange
}

export const Textbox = (
  props: Props & Omit<React.HTMLProps<HTMLInputElement>, keyof Props>
) => {
  // implement Textbox component ...
};
```

--------------------------------

### Using Generic React Components with Type Inference

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md

Demonstrates how to use a generic React component (`List`) where the type parameter `T` is inferred from the `items` prop. This example shows type safety in action, highlighting how TypeScript prevents incorrect property access on inferred types (e.g., calling `toPrecision` on a string).

```tsx
ReactDOM.render(
  <List
    items={["a", "b"]}
    renderItem={(item) => (
      <li key={item}>
        {/* Error: Property 'toPrecision' does not exist on type 'string'. */}
        {item.toPrecision(3)}
      </li>
    )}
  />,
  document.body
);
```

--------------------------------

### Document Components with TSDoc

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/misc-concerns.md

Shows how to use TSDoc syntax to provide component and prop descriptions. These comments are parsed by tooling to generate documentation and provide helpful autocomplete hints in IDEs.

```typescript
interface MyComponentProps {
  /** Description of prop "label".
   * @default foobar
   * */
  label?: string;
}

/**
 * General component description in JSDoc format. Markdown is *supported*.
 */
export default function MyComponent({ label = "foobar" }: MyComponentProps) {
  return <div>Hello world {label}</div>;
}
```

--------------------------------

### Declare and Implement a Theme HOC (TypeScript)

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/hoc/full-example.md

This code defines a Higher-Order Component (HOC) named `withTheme` that injects theme-related props (like `primaryColor`) into the wrapped component. It uses a generic type `T` to ensure type compatibility and `Omit` to exclude injected props from the HOC's own props.

```typescript
export function withTheme<T extends WithThemeProps = WithThemeProps>(
  WrappedComponent: React.ComponentType<T>
) {
  // Try to create a nice displayName for React Dev Tools.
  const displayName = 
    WrappedComponent.displayName || WrappedComponent.name || "Component";

  // Creating the inner component. The calculated Props type here is the where the magic happens.
  const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
    // Fetch the props you want to inject. This could be done with context instead.
    const themeProps = useTheme();

    // props comes afterwards so the can override the default ones.
    return <WrappedComponent {...themeProps} {...(props as T)} />;
  };

  ComponentWithTheme.displayName = `withTheme(${displayName})`;

  return ComponentWithTheme;
}
```

--------------------------------

### Webpack Configuration for TypeScript

Source: https://github.com/typescript-cheatsheets/react/blob/main/docs/migration/index.md

This snippet shows how to update a Webpack configuration file to include TypeScript and TypeScriptX files. It modifies the `resolve.extensions` to include `.ts` and `.tsx`, and updates the `module.loaders` to use `awesome-typescript-loader` for `.ts` and `.tsx` files, while also adding `source-map-loader` for `.js` files.

```javascript
module.exports = {

resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
},

// Source maps support ('inline-source-map' also works)
devtool: 'source-map',

// Add the loader for .ts files.
module: {
  loaders: [{
-       test: /.jsx?$/, 
-       loader: 'babel-loader',
-       exclude: [/node_modules/],
+       test: /\.(t|j)sx?$/, 
+       loader: ['awesome-typescript-loader?module=es6'],
+       exclude: [/node_modules/]
+   }, {
+       test: /\.js$/, 
+       loader: 'source-map-loader',
+       enforce: 'pre'
  }]
}
};
```