Pick type in Typescript - Step-by-Step Execution

Concept Flow - Pick type

Define original type

↓

Specify keys to pick

↓

Apply Pick<Type, Keys>

↓

New type with only picked keys

↓

Use new type in code

Pick type creates a new type by selecting specific keys from an existing type.

Execution Sample

Typescript

type Person = {
  name: string;
  age: number;
  city: string;
};

type PersonNameAge = Pick<Person, "name" | "age">;

This code creates a new type PersonNameAge with only 'name' and 'age' properties from Person.

Execution Table

Step	Action	Evaluation	Result
1	Define type Person	Person has keys: name, age, city	Person = {name: string; age: number; city: string;}
2	Specify keys to pick	Keys chosen: 'name' and 'age'	'name' | 'age'
3	Apply Pick<Person, 'name' | 'age'>	New type includes only 'name' and 'age' keys	PersonNameAge = {name: string; age: number;}
4	Use PersonNameAge in code	PersonNameAge has only name and age properties	Valid to assign {name: 'Alice', age: 30}
5	Try to assign city property	Error: city does not exist on PersonNameAge	TypeScript error

💡 Pick type creates a new type with only the selected keys from the original type.

Variable Tracker

Variable	Start	After Step 3	Final
Person	{name, age, city}	{name, age, city}	{name: string; age: number; city: string;}
Keys to pick	undefined	'name' | 'age'	'name' | 'age'
PersonNameAge	undefined	{name: string; age: number}	{name: string; age: number}

Key Moments - 2 Insights

Why can't I assign a 'city' property to PersonNameAge?

Because PersonNameAge only includes 'name' and 'age' keys as shown in execution_table step 3, 'city' is not part of this new type.

Does Pick create a copy of the original type?

No, Pick creates a new type with only the selected keys, it does not copy all keys. See execution_table step 3 for the result.

Visual Quiz - 3 Questions

Look at the execution_table step 3, what keys does PersonNameAge have?

A name, age, and city

B name and age

C only city

D none

💡 Hint

Refer to execution_table row 3 under Result column.

At which step does TypeScript error occur if you assign 'city' to PersonNameAge?

A Step 5

B Step 3

C Step 2

D Step 1

💡 Hint

Check execution_table row 5 about assigning city property.

If you pick only 'city' from Person, what would PersonNameAge contain?

A {}

B {name: string; age: number;}

C {city: string;}

D Error

💡 Hint

Pick creates a type with only the selected keys, see concept_flow and execution_table step 3.

Concept Snapshot

Pick<Type, Keys> creates a new type by selecting only Keys from Type.
Syntax: type NewType = Pick<OriginalType, 'key1' | 'key2'>;
Result: NewType has only the chosen keys with their original types.
Useful to create smaller types from bigger ones.
Keys must exist in the original type.

Full Transcript

The Pick type in TypeScript lets you create a new type by choosing specific keys from an existing type. First, you define the original type with all keys. Then, you specify which keys you want to keep. Applying Pick<Type, Keys> creates a new type with only those keys. For example, picking 'name' and 'age' from Person results in a type with just those two properties. Trying to use keys not picked, like 'city', causes an error. This helps make smaller, focused types from bigger ones.

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