Pick type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a type that picks only the 'name' property from the User type.

Typescript

type User = { name: string; age: number; email: string };
type UserName = Pick<User, [1]>;

Drag options to blanks, or click blank then click option'

A"email"

B"age"

C"name"

D"address"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the property name in quotes.

Using a property name that does not exist in the original type.

The Pick type selects the specified keys from the given type. Here, we want only the 'name' property.

2fill in blank

medium

Complete the code to pick both 'name' and 'email' properties from the User type.

Typescript

type User = { name: string; age: number; email: string };
type ContactInfo = Pick<User, [1]>;

Drag options to blanks, or click blank then click option'

A"name" | "email"

B"age" | "email"

C"name"

D"email"

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas instead of pipes to separate keys.

Including keys that are not part of the original type.

To pick multiple properties, use a union of string literals separated by |.

3fill in blank

hard

Fix the error in the code to correctly pick the 'age' property from the Person type.

Typescript

type Person = { name: string; age: number; location: string };
type PersonAge = Pick<Person, [1]>;

Drag options to blanks, or click blank then click option'

A"age"

Bnumber

CPerson["age"]

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Not putting the property name in quotes.

Using the property type instead of the property name.

The keys in Pick must be string literals representing property names, so they need to be in quotes.

4fill in blank

hard

Fill all three blanks to create a type that picks 'title' and 'completed' from the Task type.

Typescript

type Task = { id: number; title: string; completed: boolean };
type TaskSummary = Pick<Task, [1] [2] [3]>;

Drag options to blanks, or click blank then click option'

A"title"

B|

C"completed"

D&

Attempts:

3 left

💡 Hint

Common Mistakes

Using ampersand & instead of pipe |.

Not putting keys in quotes.

Use the pipe | to combine keys inside Pick to select multiple properties.

5fill in blank

hard

Fill all three blanks to create a type that picks 'username' and 'email' from the Account type.

Typescript

type Account = { username: string; email: string; password: string; isActive: boolean };
type AccountInfo = Pick<Account, [1] [2] [3]>;

Drag options to blanks, or click blank then click option'

A"username"

B|

C"email"

D"isActive"

Attempts:

3 left

💡 Hint

Common Mistakes

Using commas instead of pipes.

Forgetting quotes around keys.

To pick multiple properties, list them as string literals separated by pipes |. Here, 'username' and 'email' are picked; 'isActive' is not included because only two blanks are for keys and one for the separator.

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