Frontend Engineering | VoidX Academy

14. Advanced Utility Types & Assertions

Transforming Existing Types

In real-world engineering, your data structures change depending on the context. When creating a user, they might not have an ID yet. When updating a user, you might only send their name, omitting everything else. Instead of writing five different User interfaces, TypeScript provides Utility Types to dynamically transform your existing types.

Partial <T>

The Partial utility takes an existing type and makes every single property inside it optional. This is perfectly suited for "Update" or "Patch" payloads in APIs.

interface User {
  id: number;
  name: string;
  email: string;
}

// Converts to: { id?: number; name?: string; email?: string; }
type UserUpdatePayload = Partial<User>;

// Valid: We are only updating the name, ignoring id and email
const updateData: UserUpdatePayload = {
  name: "John Doe"
};

Pick <T, K> and Omit <T, K>

Pick creates a new type by extracting a specific set of properties from an existing type. Omit does the exact opposite: it creates a new type by grabbing everything except the specified properties.

// We only want the name and email for the preview
type UserPreview = Pick<User, "name" | "email">;
const preview: UserPreview = { name: "Alice", email: "alice@voidx.io" };

// When creating a user, the database generates the ID, so we OMIT it from the payload
type CreateUserPayload = Omit<User, "id">;
const newUser: CreateUserPayload = { name: "Bob", email: "bob@voidx.io" };

Record <K, T>

The Record utility is the cleanest way to define an object that acts as a dictionary or map, where you know the type of the keys and the type of the values.

// A dictionary where the keys are strings (roles) and values are numbers (salaries)
type SalaryMap = Record<string, number>;

const salaries: SalaryMap = {
  manager: 120000,
  developer: 100000
};

Type Assertions (`as`)

Sometimes you have more context about a value than the TypeScript compiler does. You can use the as keyword to force the compiler to treat a value as a specific type. Warning: Use this sparingly!

// TypeScript only knows this returns a generic HTMLElement (or null).
// We use 'as HTMLInputElement' to tell TS: "Trust me, this is an input field."
const searchInput = document.getElementById("search") as HTMLInputElement;

// Because we asserted it, TS now allows us to safely access the .value property
console.log(searchInput.value);

14. Advanced Utility Types & Assertions

Transforming Existing Types

Partial <T>

The Partial utility takes an existing type and makes every single property inside it optional. This is perfectly suited for "Update" or "Patch" payloads in APIs.

interface User {
  id: number;
  name: string;
  email: string;
}

// Converts to: { id?: number; name?: string; email?: string; }
type UserUpdatePayload = Partial<User>;

// Valid: We are only updating the name, ignoring id and email
const updateData: UserUpdatePayload = {
  name: "John Doe"
};

Pick <T, K> and Omit <T, K>

// We only want the name and email for the preview
type UserPreview = Pick<User, "name" | "email">;
const preview: UserPreview = { name: "Alice", email: "alice@voidx.io" };

// When creating a user, the database generates the ID, so we OMIT it from the payload
type CreateUserPayload = Omit<User, "id">;
const newUser: CreateUserPayload = { name: "Bob", email: "bob@voidx.io" };

Record <K, T>

The Record utility is the cleanest way to define an object that acts as a dictionary or map, where you know the type of the keys and the type of the values.

// A dictionary where the keys are strings (roles) and values are numbers (salaries)
type SalaryMap = Record<string, number>;

const salaries: SalaryMap = {
  manager: 120000,
  developer: 100000
};

Type Assertions (`as`)

// TypeScript only knows this returns a generic HTMLElement (or null).
// We use 'as HTMLInputElement' to tell TS: "Trust me, this is an input field."
const searchInput = document.getElementById("search") as HTMLInputElement;

// Because we asserted it, TS now allows us to safely access the .value property
console.log(searchInput.value);

14. Advanced Utility Types & Assertions

Transforming Existing Types

Partial <T>

Pick <T, K> and Omit <T, K>

Record <K, T>

Type Assertions (`as`)

Knowledge Check

14. Advanced Utility Types & Assertions

Transforming Existing Types

Partial <T>

Pick <T, K> and Omit <T, K>

Record <K, T>

Type Assertions (`as`)

Knowledge Check