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.