Docs
Types

Types

Several type helpers.

Installation

Create a lib/types.ts file and copy/paste the types you need.

General TypeScript

/**
 * Gets the type of a single array element.
 *
 * @example
 * type Item = ArrayItem<string[]>;
 * // Item is now string
 */
export type ArrayItem<ArrayType extends readonly unknown[]> =
  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 
/**
 * Infers the value type of a record or map.
 */
export type InferValue<TKeyValue> = TKeyValue extends Map<unknown, infer TValue>
  ? TValue
  : TKeyValue extends Record<string, infer TValue>
    ? TValue
    : never;
 
/**
 * Extends an array with an item of the given type.
 *
 * @example
 * type MyArray = ExtendArray<string[], { foo: string }>;
 * // MyArray is now (string & { foo: string })[]
 */
export type ExtendArray<BaseArray, AppendedObject> = BaseArray extends Iterable<
  infer ArrayItem
>
  ? AppendedObject extends object
    ? (ArrayItem & AppendedObject)[]
    : never
  : never;
 
/**
 * Infers the type of the resolved value of a Promise.
 *
 * @template T - The type of the Promise.
 * @returns The type of the resolved value of the Promise.
 *
 * @deprecated Use Awaited<T> instead.
 */
export type InferPromise<T> = T extends Promise<infer U> ? U : never;

React

/**
 * Alias for state setter.
 */
export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
 
/**
 * Alias for state tuple.
 */
export type State<T> = [T, SetState<T>];

Next.js

/**
 * Type for query params in URL, usable in page.tsx or layout.tsx.
 *
 * @example
 * export default function Page({ searchParams }: { searchParams: SearchParams }) {
 *  ...
 * }
 */
export type SearchParams = Record<string, string | string[] | undefined>;

Zustand

pnpm add zustand immer
import type { StateCreator } from "zustand";
import { immer } from "zustand/middleware/immer";
 
/**
 * This variable is needed because the zustand/immer types don't work properly for whatever reason.
 */
 
const _IGNORE = immer;
 
/**
 * Add immer middleware to zustand slice.
 */
export type Slice<T> = StateCreator<
  T,
  [["zustand/immer", never], never],
  [],
  T
>;

Kysely

/**
 * Helper for getting the return type of a kysely query.
 *
 * @example
 * const query = client.selectFrom("table").select(["table.foo"])
 * type Rows = FetchedRows<typeof query>;
 *
 * // Rows is now { foo: string }[]
 */
export type FetchedRows<
  T extends (...any: any[]) => { ["expressionType"]: any },
> = NonNullable<ReturnType<T>["expressionType"]>[];