Master TypeScript Utility Types: From Basics to Advanced TS Tricks

Introduction

TypeScript’s type system is one of its most powerful features, offering rich built‑in utility types that allow declarative type manipulation and transformation. These utilities act like a “Swiss army knife” for the type system, greatly improving frontend developers’ productivity and reducing errors.

PS: If you already understand the built‑in types, you can skip to the advanced section.

1. Common Built‑in TypeScript Utility Types

1. Basic Object Utilities

Partial<T> – makes all properties of a type optional.

<code>interface User {
  id: number;
  name: string;
  email: string;
}
type PartialUser = Partial&lt;User&gt;;
/* Equivalent to:
{
  id?: number;
  name?: string;
  email?: string;
}
*/</code>

Required<T> – makes all properties of a type required.

<code>type OptionalUser = {
  id?: number;
  name?: string;
};
type RequiredUser = Required&lt;OptionalUser&gt;;
/* Equivalent to:
{
  id: number;
  name: string;
}
*/</code>

Readonly<T> – makes all properties of a type read‑only.

<code>interface MutableConfig {
  apiUrl: string;
  timeout: number;
}
type ImmutableConfig = Readonly&lt;MutableConfig&gt;;
/* Equivalent to:
{
  readonly apiUrl: string;
  readonly timeout: number;
}
*/</code>

Record<K, T> – creates an object type with specific key and value types.

<code>type PagePaths = Record<'home' | 'about' | 'contact', string>;
/* Equivalent to:
{
  home: string;
  about: string;
  contact: string;
}
*/
type UserMap = Record<number, User>;
/* Equivalent to:
{
  [key: number]: User;
}
*/</code>

2. Property Selection Utilities

Pick<T, K> – constructs a new type by picking a set of properties K from type T.

<code>interface FullUser {
  id: number;
  name: string;
  email: string;
  password: string;
}
type PublicUser = Pick&lt;FullUser, 'id' | 'name' | 'email'&gt;;
/* Equivalent to:
{
  id: number;
  name: string;
  email: string;
}
*/</code>

Omit<T, K> – constructs a new type by omitting a set of properties K from type T.

<code>type SecureUser = Omit&lt;FullUser, 'password'&gt;;
/* Equivalent to:
{
  id: number;
  name: string;
  email: string;
}
*/</code>

3. Union Type Utilities

Exclude<T, U> – removes from T those types that are assignable to U.

<code>type T = number | string | boolean;
type Numeric = Exclude&lt;T, string | boolean&gt;; // number</code>

Extract<T, U> – extracts from T those types that are assignable to U.

<code>type T = string | number | boolean;
type StringOnly = Extract&lt;T, string&gt;; // string
type Numeric = Extract&lt;T, number | bigint&gt;; // number</code>

NonNullable<T> – removes null and undefined from T.

<code>type Nullable = string | null | undefined;
type SafeString = NonNullable&lt;Nullable&gt;; // string</code>

4. Function Type Utilities

ReturnType<T> – obtains the return type of a function type.

<code>type Fn = () => Promise&lt;string&gt;;
type Result = ReturnType&lt;Fn&gt;; // Promise&lt;string&gt;</code>

Parameters<T> – obtains a tuple type of the parameters of a function type.

<code>type Handler = (req: Request, res: Response) => void;
type HandlerArgs = Parameters&lt;Handler&gt;; // [Request, Response]</code>

ConstructorParameters<T> – obtains a tuple type of the constructor parameters of a class.

<code>class User {
  constructor(public id: number, public name: string) {}
}
type UserParams = ConstructorParameters&lt;typeof User&gt;; // [number, string]</code>

2. Advanced TS: Higher‑Order Type Extensions

1. Basic Type Extensions

KeyOf<T> – obtains a union of all keys of type T.

<code>type KeyOf&lt;T&gt; = keyof T;
type Obj = { a: number; b: string };
type Keys = KeyOf&lt;Obj&gt;; // "a" | "b"</code>

Awaitable<T> – represents a value that can be either T or a Promise of T.

<code>type Awaitable&lt;T&gt; = T | Promise&lt;T&gt; | Awaitable&lt;T&gt;;
const a: Awaitable&lt;number&gt; = 42;
const b: Awaitable&lt;number&gt; = Promise.resolve(42);</code>

ElementType<T> – extracts the element type of an array.

<code>type ElementType&lt;T&gt; = T extends Array&lt;infer U&gt; ? U : never;
type A = ElementType&lt;string[]&gt;; // string
type B = ElementType&lt;number&gt;; // never</code>

Arrayable<T> – creates a type that can be T or an array of T.

<code>type Arrayable&lt;T&gt; = T | T[];
const a: Arrayable&lt;string&gt; = "hello";
const b: Arrayable&lt;string&gt; = ["hello", "world"];</code>

ToArray<T> – converts T to an array type, leaving arrays unchanged.

<code>type ToArray&lt;T&gt; = T extends (infer U)[] ? U[] : T[];
type A = ToArray&lt;string&gt;; // string[]
type B = ToArray&lt;number[]&gt;; // number[]</code>

ArgumentType<T> – obtains the parameter tuple type of a function.

<code>type ArgumentType&lt;T&gt; = T extends (...args: infer A) => unknown ? A : never;
type Fn = (a: number, b: string) => boolean;
type Args = ArgumentType&lt;Fn&gt;; // [number, string]</code>

Shift<T> – removes the first element from a tuple type.

<code>type Shift&lt;T&gt; = T extends [_: unknown, ...args: infer Rest] ? Rest : never;
type A = Shift&lt;[number, string, boolean]&gt;; // [string, boolean]</code>

Pop<T> – removes the last element from a tuple type.

<code>type Pop&lt;T extends unknown[]&gt; = T extends [...infer Rest, unknown] ? Rest : never;
type A = Pop&lt;[number, string, boolean]&gt;; // [number, string]</code>

FlatObjectTuple<T> – flattens an object tuple type to resolve intersection display issues.

<code>type FlatObjectTuple&lt;T&gt; = { [K in keyof T]: T[K] };</code>

2. Intermediate Extensions

(1) Type Assertion Tools

AssertEqual<T, U> – asserts whether two types are equal.

<code>type AssertEqual&lt;T, U&gt; = [T] extends [U] ? ([U] extends [T] ? true : false) : false;</code>

(2) Deep Type Transformations

DeepPartial<T> – makes all properties of T recursively optional.

<code>type DeepPartial&lt;T&gt; = { [P in keyof T]?: DeepPartial&lt;T[P]&gt;; };
type Obj = { a: { b: number; c: string } };
type PartialObj = DeepPartial&lt;Obj&gt;; // { a?: { b?: number; c?: string } }</code>

(3) Object Property Control

PartialByKeys<T, K> – makes a subset K of properties optional.

<code>type PartialByKeys&lt;T, K extends keyof T = keyof T&gt; =
  FlatObjectTuple&lt;Partial&lt;Pick&lt;T, Extract&lt;keyof T, K&gt;&gt;&gt; &amp; Omit&lt;T, K&gt;;
type Obj = { a: number; b: string; c: boolean };
type PartialA = PartialByKeys&lt;Obj, 'a' | 'b'&gt;; // { a?: number; b?: string; c: boolean }</code>

RequiredByKey<T, K> – makes a subset K of properties required.

<code>type RequiredByKey&lt;T, K extends keyof T = keyof T&gt; =
  FlatObjectTuple&lt;Required&lt;Pick&lt;T, Extract&lt;keyof T, K&gt;&gt;&gt; &amp; Omit&lt;T, K&gt;;
type Obj = { a?: number; b?: string; c?: boolean };
type RequiredA = RequiredByKey&lt;Obj, 'a' | 'b'&gt;; // { a: number; b: string; c?: boolean }</code>

3. Advanced Function Tools

FunctionKeysObject<T> – extracts all function‑type properties from an object.

<code>type FunctionKeysObject&lt;T&gt; = {
  [K in keyof T]: T[K] extends (...args: any[]) => any ? T[K] : never;
};</code>

FunctionMapType<F> – creates a type‑safe event system based on function keys.

<code>type FunctionMapType&lt;F&gt; = &lt;T extends keyof FunctionKeysObject&lt;F&gt;&gt;(key: T, ...args: Parameters&lt;F[T]&gt;) => void;
interface EventFunctions {
  a(): void;
  b(params: { c: string; d: number }): void;
}
declare const emit: FunctionMapType&lt;EventFunctions&gt;;
emit('a'); // OK
emit('b', { c: '123', d: 123 }); // OK
// emit('b', { c: 123, d: '123' }); // Error</code>

Conclusion

Types are documentation, constraints, and power!

TypeScript’s utility type system is a powerful type‑conversion factory; the built‑in utilities provide the foundation, while higher‑order extensions enable you to build complex systems in a more elegant and type‑safe manner.