Why utility types are needed in Typescript - See It in Action

Why utility types are needed

📖 Scenario: Imagine you are building a simple app to manage user profiles. You want to store user information but sometimes you need only part of the data or want to change some properties without rewriting everything.

🎯 Goal: You will create a basic user type, then use utility types to create new types that pick or modify parts of the user data. This shows why utility types help save time and avoid mistakes.

📋 What You'll Learn

Create a User type with exact properties

Create a type UserPreview that picks only name and email from User

Create a type PartialUser that makes all User properties optional

Create a type ReadonlyUser that makes all User properties readonly

💡 Why This Matters

🌍 Real World

Utility types are used in real apps to handle data shapes flexibly, like updating user info or showing previews without copying all data.

💼 Career

Understanding utility types is important for TypeScript developers to write clean, maintainable, and error-free code efficiently.

1

Create the User type

Create a TypeScript type called User with these exact properties: id as number, name as string, email as string, and age as number.

Typescript

// Your code here

Need a hint?

Use the type keyword to define a new type with the given properties and their types.

2

Create UserPreview type using Pick

Create a new type called UserPreview that uses the Pick utility type to select only the name and email properties from the User type.

Typescript

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

// Your code here

Need a hint?

Use Pick<Type, Keys> to create a new type with only the selected keys from the original type.

3

Create PartialUser type using Partial

Create a new type called PartialUser that uses the Partial utility type to make all properties of User optional.

Typescript

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserPreview = Pick;

// Your code here

Need a hint?

Use Partial<Type> to make all properties optional in the new type.

4

Create ReadonlyUser type using Readonly and show example

Create a new type called ReadonlyUser that uses the Readonly utility type to make all properties of User readonly. Then create a constant user of type ReadonlyUser with id 1, name "Alice", email "[e-mail]", and age 30. Finally, print the user object using console.log.

Typescript

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserPreview = Pick;

type PartialUser = Partial;

// Your code here

Need a hint?

Use Readonly<Type> to make all properties readonly. Then create a constant object with the given values and print it.