Pick type in Typescript - Mini Project: Build & Apply

Using the Pick Type in TypeScript

📖 Scenario: You are working on a user management system. You have a full user profile object, but sometimes you only need a smaller part of that profile, like just the user's name and email.

🎯 Goal: Learn how to use the Pick type in TypeScript to create a new type with only selected properties from an existing type.

📋 What You'll Learn

Create a full user profile type with specific properties

Create a new type using Pick to select only some properties

Create a variable of the new picked type with exact properties

Print the picked user information to the console

💡 Why This Matters

🌍 Real World

In real projects, you often have big data objects but only need a small part for certain tasks, like showing user contact info or sending emails.

💼 Career

Understanding <code>Pick</code> helps you write cleaner, safer TypeScript code by reusing types and avoiding repetition.

1

Create a full user profile type

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

Typescript

// Your code here

Hint

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

2

Create a picked user type with Pick

Create a new type called UserContact using Pick to select only the name and email properties from UserProfile.

Typescript

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

// Your code here

Hint

Use Pick<OriginalType, "prop1" | "prop2"> to create a new type with only the chosen properties.

3

Create a variable of the picked type

Create a constant variable called contactInfo of type UserContact with name set to "Alice" and email set to "[e-mail]".

Typescript

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

type UserContact = Pick;

// Your code here

Hint

Define a constant with the picked type and assign the exact property values as strings.

4

Print the picked user information

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

Typescript

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

type UserContact = Pick;

const contactInfo: UserContact = {
  name: "Alice",
  email: "[e-mail]"
};

// Your code here

Hint

Use console.log(contactInfo) to show the picked user information in the console.

Practice

1. What does the Pick type do in TypeScript?

easy

A. Removes properties from a type.

B. Creates a new type by selecting specific properties from an existing type.

C. Combines two types into one.

D. Makes all properties in a type optional.

Solution

1. Step 1: Understand the purpose of Pick

   The Pick type is used to create a new type by choosing certain properties from an existing type.

2. Step 2: Compare with other options

   Removing properties is done by Omit, combining types by intersection, and making properties optional by Partial.

3. Final Answer:

   Creates a new type by selecting specific properties from an existing type. -> Option B

4. Quick Check:

   Pick selects properties = A [OK]

Hint: Pick selects properties to create smaller types [OK]

Common Mistakes:

• Confusing Pick with Omit
• Thinking Pick makes properties optional
• Mixing Pick with type intersections

2. Which of the following is the correct syntax to create a type PersonName with only name and age properties from Person using Pick?

easy

A. type PersonName = Pick;

B. type PersonName = Pick;

C. type PersonName = Pick;

D. type PersonName = Pick;

Solution

1. Step 1: Recall Pick syntax

   Pick takes two parameters: the original type and a union of property names as string literals.

2. Step 2: Identify correct union syntax

   The union of keys is written as 'name' | 'age' inside quotes and separated by |.

3. Final Answer:

   type PersonName = Pick; -> Option A

4. Quick Check:

   Pick syntax uses union of strings = B [OK]

Hint: Use quotes and | to list keys in Pick [OK]

Common Mistakes:

• Omitting quotes around keys
• Using array syntax instead of union
• Passing keys as object instead of union

3. Given the type interface User { id: number; name: string; email: string; } and type UserPreview = Pick;, what is the type of userPreview in this code?

const userPreview: UserPreview = { id: 1, name: 'Alice' };

medium

A. { name: string; email: string; }

B. { id: number; name: string; email: string; }

C. { id: number; }

D. { id: number; name: string; }

Solution

1. Step 1: Understand Pick selects properties

   UserPreview picks only 'id' and 'name' from User, so it has only those two properties.

2. Step 2: Match the type of userPreview

   The object assigned has 'id' and 'name' only, matching the Pick type exactly.

3. Final Answer:

   { id: number; name: string; } -> Option D

4. Quick Check:

   Pick selects only chosen keys = A [OK]

Hint: Pick type has only selected keys, no extras [OK]

Common Mistakes:

• Assuming all original properties remain
• Confusing Pick with Partial
• Including properties not picked

4. Identify the error in this TypeScript code using Pick:

interface Product { id: number; name: string; price: number; }
type ProductInfo = Pick;

medium

A. The interface Product is missing a 'cost' property.

B. Pick cannot be used with more than one key.

C. 'cost' is not a key of Product, causing a type error.

D. The syntax for Pick is incorrect; keys should be in an array.

Solution

1. Step 1: Check keys used in Pick

   Pick requires keys to exist in the original type. 'cost' is not a key in Product.

2. Step 2: Understand TypeScript error

   Using a non-existent key causes a type error because Pick cannot select keys that don't exist.

3. Final Answer:

   'cost' is not a key of Product, causing a type error. -> Option C

4. Quick Check:

   Pick keys must exist in type = C [OK]

Hint: Pick keys must match existing properties exactly [OK]

Common Mistakes:

• Using keys not in the original type
• Thinking Pick keys can be arrays
• Assuming Pick works with any string keys

5. You have a type interface Employee { id: number; name: string; department: string; salary: number; }. You want to create a type EmployeeSummary that includes only id, name, and a new property departmentCode which is a string. How can you do this using Pick and adding the new property?

hard

A. type EmployeeSummary = Pick & { departmentCode: string };

B. type EmployeeSummary = Pick;

C. type EmployeeSummary = Omit & { departmentCode: string };

D. type EmployeeSummary = Partial<Employee> & { departmentCode: string };

Solution

1. Step 1: Use Pick to select existing keys

   Pick 'id' and 'name' from Employee to get those properties only.

2. Step 2: Add new property with intersection

   Use & to add a new property 'departmentCode' with type string to the picked type.

3. Final Answer:

   type EmployeeSummary = Pick & { departmentCode: string }; -> Option A

4. Quick Check:

   Pick keys + add new property with & = D [OK]

Hint: Combine Pick with & to add new properties [OK]

Common Mistakes:

• Trying to Pick a non-existent property
• Using Omit instead of Pick incorrectly
• Using Partial which makes all properties optional