Combining utility types in Typescript - Mini Project: Build & Apply

Combining Utility Types in TypeScript

📖 Scenario: You are building a simple user management system. You want to create different versions of a user object by combining TypeScript utility types.

🎯 Goal: Learn how to combine utility types like Partial and Pick to create new types from an existing interface.

📋 What You'll Learn

Create an interface called User with exact properties

Create a type called PartialUser using Partial utility type

Create a type called UserNameAndEmail using Pick utility type

Create a type called PartialNameAndEmail by combining Partial and Pick

Print the types to verify their structure

💡 Why This Matters

🌍 Real World

In real projects, you often need to create new types based on existing ones to handle partial updates or select specific fields for forms or API responses.

💼 Career

Understanding how to combine utility types is important for writing clean, reusable, and type-safe code in TypeScript, which is widely used in frontend and backend development.

1

Create the User interface

Create an interface called User with these exact properties and types: id: number, name: string, email: string, age: number.

Typescript

// Your code here

Need a hint?

Use the interface keyword and list all properties with their types inside curly braces.

2

Create the PartialUser type using Partial

Create a type called PartialUser that makes all properties of User optional by using the Partial utility type.

Typescript

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

// Your code here

Need a hint?

Use type PartialUser = Partial; to make all properties optional.

3

Create the UserNameAndEmail type using Pick

Create a type called UserNameAndEmail that picks only the name and email properties from User using the Pick utility type.

Typescript

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

type PartialUser = Partial;

// Your code here

Need a hint?

Use Pick to select only those two properties.

4

Create PartialNameAndEmail by combining Partial and Pick and print it

Create a type called PartialNameAndEmail by applying Partial to Pick. Then create a variable example of type PartialNameAndEmail with only the email property set to '[e-mail]'. Finally, print example using console.log.

Typescript

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

type PartialUser = Partial;

type UserNameAndEmail = Pick;

// Your code here

Need a hint?

Use type PartialNameAndEmail = Partial>; and then create a variable with only the email property. Use console.log(example); to print.