Removing modifiers with minus in Typescript - Mini Project: Build & Apply

Excluding Keys with Mapped Type Remapping in TypeScript

📖 Scenario: Imagine you have a TypeScript type representing a user profile with several properties. Sometimes, you want to create a new type that is like the original but without some properties, for example, removing the email and phone contact details.

🎯 Goal: You will create a type called UserProfile with some properties. Then, you will create a new type called ContactlessUser that removes the email and phone properties from UserProfile using key remapping in a mapped type.

📋 What You'll Learn

Create a type UserProfile with properties: name, age, email, and phone.

Create a type ContactlessUser that removes email and phone from UserProfile using mapped type key remapping.

Create a variable user of type ContactlessUser with name and age properties.

Print the user variable to the console.

💡 Why This Matters

🌍 Real World

Removing properties from types is useful when you want to create variations of data models without repeating code, such as hiding sensitive information before sending data to the client.

💼 Career

Understanding how to manipulate types with modifiers is important for writing clean, maintainable TypeScript code in professional web development and software engineering.

1

Create the UserProfile type

Create a type called UserProfile with these exact properties and types: name: string, age: number, email: string, and phone: string.

Typescript

# Your code here
type UserProfile = {
    // define properties
}

Need a hint?

Use type UserProfile = { name: string; age: number; email: string; phone: string; } to define the type.

2

Create ContactlessUser type removing email and phone

Create a type called ContactlessUser that uses a mapped type over keyof UserProfile but removes the keys "email" and "phone" using key remapping. The resulting type should only have name and age.

Typescript

type UserProfile = {
    name: string;
    age: number;
    email: string;
    phone: string;
};

# Your code here
type ContactlessUser = {
    // remove email and phone keys
};

Need a hint?

Use [K in keyof UserProfile as K extends "email" | "phone" ? never : K]: UserProfile[K] to remove keys.

3

Create a variable user of type ContactlessUser

Create a variable called user of type ContactlessUser and assign it an object with name set to "Alice" and age set to 30.

Typescript

type UserProfile = {
    name: string;
    age: number;
    email: string;
    phone: string;
};

type ContactlessUser = {
    [K in keyof UserProfile as K extends "email" | "phone" ? never : K]: UserProfile[K];
};

# Your code here
const user: ContactlessUser = {
    // add name and age
};

Need a hint?

Assign { name: "Alice", age: 30 } to user.

4

Print the user variable

Write a console.log statement to print the user variable to the console.

Typescript

type UserProfile = {
    name: string;
    age: number;
    email: string;
    phone: string;
};

type ContactlessUser = {
    [K in keyof UserProfile as K extends "email" | "phone" ? never : K]: UserProfile[K];
};

const user: ContactlessUser = {
    name: "Alice",
    age: 30
};

# Your code here
console.log(user);

Need a hint?

Use console.log(user); to print the object.