Pick type in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Pick type example?

Consider the following TypeScript code using the Pick utility type. What is the type of picked and what will be logged?

Typescript

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

const user: User = { id: 1, name: "Alice", age: 30, email: "[e-mail]" };

type UserNameAndEmail = Pick<User, "name" | "email">;

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

console.log(picked);

A {"age": 30, "email": "[e-mail]"}

B {"id": 1, "name": "Alice"}

C TypeScript compilation error due to missing properties

D {"name": "Alice", "email": "[e-mail]"}

💡 Hint

Pick creates a new type by selecting only the specified keys from the original type.

The Pick type creates a new type with only the keys 'name' and 'email' from User. So the object 'picked' must have only those two properties. The console.log outputs the object with those properties.

🧠 Conceptual

intermediate

Which statement about Pick type is true?

Choose the correct statement about the TypeScript Pick utility type.

A Pick creates a new type by excluding specified keys from the original type.

B Pick can only be used with primitive types, not interfaces.

C Pick creates a new type by selecting specified keys from the original type.

D Pick modifies the original type by adding new keys.

💡 Hint

Think about what Pick does to the keys of a type.

Pick creates a new type by selecting only the keys you specify from the original type. It does not exclude keys or modify the original type.

🔧 Debug

advanced

Why does this Pick type usage cause an error?

Given this code, why does TypeScript raise an error?

Typescript

interface Product {
  id: number;
  name: string;
  price: number;
}

type ProductNameAndStock = Pick<Product, "name" | "stock">;

const product: ProductNameAndStock = { name: "Book", stock: 10 };

A "stock" is not a key of Product, so Pick causes a type error.

B The object is missing the "price" property, causing an error.

C Pick cannot be used with more than one key.

D The object must include all keys of Product, Pick does not change that.

💡 Hint

Check if all keys in Pick exist in the original interface.

The key "stock" does not exist in Product, so Pick is invalid and causes a type error.

📝 Syntax

advanced

Which option correctly uses Pick to select keys?

Select the correct TypeScript syntax to create a type with only the "title" and "author" keys from the interface Book.

Typescript

interface Book {
  title: string;
  author: string;
  pages: number;
  published: Date;
}

A type BookSummary = Pick<Book, "title", "author">;

B type BookSummary = Pick<Book, "title" | "author">;

C type BookSummary = Pick<Book, ["title", "author"]>;

D type BookSummary = Pick<Book, { title: string; author: string }>;

💡 Hint

Pick takes two parameters: the type and a union of keys as string literals.

Pick expects the second parameter to be a union of keys as string literals separated by |, not multiple parameters or arrays or objects.

🚀 Application

expert

How many keys are in the resulting type?

Given this code, how many keys does the type PartialPick have?

Typescript

interface Settings {
  theme: string;
  notifications: boolean;
  autoSave: boolean;
  version: number;
}

type PartialPick = Pick<Settings, keyof Settings>;

A 4 keys

B 3 keys

C 2 keys

D 0 keys

💡 Hint

keyof Settings returns all keys of Settings.

keyof Settings returns all keys: "theme", "notifications", "autoSave", "version". Pick with all keys returns a type with all 4 keys.

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