Welcome, fellow developers, to the captivating world of TypeScript utility types! TypeScript equips us with a toolbox of utility types to simplify complex type manipulations. Let's dive right in, understanding their essence with crisp definitions and insightful examples.

Partial<Type>: Embracing Optionality

With Partial, all properties of a type become optional, offering flexibility in handling optional data.

interface User {
  name: string;
  age?: number;
}

function updateUser(user: User, updates: Partial<User>): User {
  return { ...user, ...updates };
}

const initialUser: User = { name: "Vroon" };
const updatedUser = updateUser(initialUser, { age: 20 });

Awaited<Type>: Unraveling Promises

The Awaited type unwraps Promise types, revealing their resolved values.

type AwaitingString = Awaited<Promise<string>>;
// Result: string

type AwaitingNestedPromise = Awaited<Promise<Promise<number>>>;
// Result: number

type AwaitingMixedType = Awaited<boolean | Promise<number>>;
// Result: number | boolean

Readonly<Type>: Safeguarding Immutability

Readonly ensures that all properties of a type are immutable, preventing unintended modifications.

interface Point {
  readonly x: number;
  readonly y: number;
}

const origin: Readonly<Point> = { x: 0, y: 0 };

Record<Keys, Type>: Crafting Precise Structures

Record constructs objects with specified keys and corresponding value types.

type ContactInfo = Record<"email" | "phone", string>;

const contact: ContactInfo = { email: "example@example.com", phone: "+123456789" };

Required<Type>: Makes properties mandatory

Required constructs a type consisting of all properties of Type set to required.

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 };
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Pick<Type, Keys>: Selecting Specific Properties

Pick extracts specific properties from a type, creating a new tailored type.

interface Car {
  make: string;
  model: string;
  year: number;
}

type CarInfo = Pick<Car, "make" | "year">;

const carDetails: CarInfo = { make: "Toyota", year: 2022 };

Omit<Type, Keys>: Excluding Unwanted Properties

Omit removes specified properties from a type, producing a refined subset.

interface Book {
  title: string;
  author: string;
  pages: number;
}

type BookPreview = Omit<Book, "pages">;

const preview: BookPreview = { title: "The Great Gatsby", author: "F. Scott Fitzgerald" };

Exclude<UnionType, ExcludedMembers>: Filtering Union Types

Exclude eliminates members from a union type based on specified exclusions.

type NonNumeric = Exclude<number | string | boolean, number>;

const values: NonNumeric[] = ["apple", true];

Extract<Type, Union>: Retrieving Union Members

Extract fetches members from a union type based on specified inclusion criteria.

type Numeric = Extract<number | string | boolean, number>;

const nums: Numeric[] = [10, 20];

NonNullable<Type>: Removes null and undefined

NonNullable constructs a type by excluding null and undefined from Type.

type T0 = NonNullable<string | number | undefined>;
// T0: string | number

Parameters<Type>: Extracts function parameters

Parameters make a tuple type from the types used in the parameters of a function type Type.

declare function f1(arg: { a: number; b: string }): void;

type T0 = Parameters<() => string>;
// T0: []

type T1 = Parameters<(s: string) => void>;
// T1: [s: string]

type T2 = Parameters<<T>(arg: T) => T>;
// T2: [arg: unknown]

type T3 = Parameters<typeof f1>;
// T3: [arg: { a: number; b: string }]

ConstructorParameters<Type>: Extracts constructor parameters

ConstructorParameters make a tuple or array type from the types of a constructor function type.

type T0 = ConstructorParameters<ErrorConstructor>;
// T0: [message?: string]

type T1 = ConstructorParameters<FunctionConstructor>;
// T1: string[]

type T2 = ConstructorParameters<RegExpConstructor>;
// T2: [pattern: string | RegExp, flags?: string]

class C {
  constructor(a: number, b: string) {}
}

type T3 = ConstructorParameters<typeof C>;
// T3: [a: number, b: string]

ReturnType<Type>: Extracts return type

ReturnType constructs a type consisting of the return type of function Type.

declare function f1(): { a: number; b: string };

type T0 = ReturnType<() => string>;
// T0: string

type T1 = ReturnType<(s: string) => void>;
// T1: void

type T2 = ReturnType<typeof f1>;
// T2: { a: number; b: string }

InstanceType<Type>: Returns instance type

InstanceType constructs a type consisting of the instance type of a constructor function in Type.

class C {
  x = 0;
  y = 0;
}

type T0 = InstanceType<typeof C>;
// T0: C

ThisParameterType<Type>: Extracts 'this' type

ThisParameterType extracts the type of the this parameter for a function type.

function toHex(this: Number) {
  return this.toString(16);
}

function numberToString(n: ThisParameterType<typeof toHex>) {
  return toHex.apply(n);
}

OmitThisParameter<Type>: Removes 'this' parameter

OmitThisParameter removes the this parameter from Type.

function toHex(this: Number) {
  return this.toString(16);
}

const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);
console.log(fiveToHex());

ThisType<Type>: Contextual 'this' marker

ThisType serves as a marker for a contextual this type.

type ObjectDescriptor<D, M> = {
  data?: D;
  methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};

function makeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M {
  let data: object = desc.data || {};
  let methods: object = desc.methods || {};
  return { ...data, ...methods } as D & M;
}

---

These examples only scratch the surface of TypeScript utility types. Embrace their versatility, leverage their capabilities, and witness your TypeScript endeavours soar to new heights of clarity and efficiency.

Once you go TypeScript, you never go back ;)

Thank you for reading the article! If you found it helpful, consider giving me a follow on GitHub for more insightful content and updates.