Basic mapped type syntax in Typescript - Step-by-Step Execution

Concept Flow - Basic mapped type syntax

Start with Keys

↓

Iterate over Keys

↓

Apply Transformation

↓

Build New Type

↓

Resulting Mapped Type

Mapped types take each key from an existing type and create a new type by applying a transformation to each key.

Execution Sample

Typescript

type Options = {
  width: number;
  height: number;
};

type ReadonlyOptions = {
  readonly [K in keyof Options]: Options[K];
};

This code creates a new type ReadonlyOptions by making all properties of Options readonly using mapped type syntax.

Execution Table

Step	Action	Key (K)	Original Type (Options[K])	Mapped Property	Resulting Property Type
1	Start mapping
2	Iterate key	width	number	readonly width	number
3	Iterate key	height	number	readonly height	number
4	Finish mapping				ReadonlyOptions type created

💡 All keys from Options processed, mapped type ReadonlyOptions created with readonly properties.

Variable Tracker

Variable	Start	After 1	After 2	Final
K	undefined	width	height	all keys processed
Mapped Property	none	readonly width	readonly height	readonly width, readonly height
Resulting Type	none	{ readonly width: number }	{ readonly width: number; readonly height: number }	ReadonlyOptions

Key Moments - 2 Insights

Why do we use 'in keyof Options' in the mapped type?

Because 'keyof Options' gets all keys from Options type, and 'in' iterates over each key to create properties in the new type, as shown in execution_table rows 2 and 3.

What does 'readonly' do in the mapped type?

'readonly' makes each property immutable, so you cannot change its value after creation. This is shown in the 'Mapped Property' column in execution_table rows 2 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the mapped property created for the key 'height'?

A readonly width

B height

C readonly height

D width

💡 Hint

Check execution_table row 3 under 'Mapped Property' column.

At which step does the mapped type finish creating all properties?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Look at execution_table row 4 where it says 'Finish mapping'.

If we remove 'readonly' from the mapped type, what changes in the resulting type?

A Properties become optional

B Properties become mutable (can be changed)

C Keys are removed

D Type becomes a function

💡 Hint

Refer to key_moments about what 'readonly' does to properties.

Concept Snapshot

Mapped types syntax:
  type NewType = { [K in keyof OldType]: OldType[K] };
Use 'in keyof' to loop keys.
Add modifiers like 'readonly' to change properties.
Creates new types by transforming existing ones.

Full Transcript

Mapped types in TypeScript let you create new types by looping over keys of an existing type and applying changes. The syntax uses '[K in keyof OldType]' to iterate keys. For example, making all properties readonly uses 'readonly [K in keyof OldType]: OldType[K]'. The execution table shows each key processed and the resulting property. Beginners often wonder why 'in keyof' is used and what 'readonly' does. 'in keyof' loops keys, and 'readonly' makes properties immutable. The visual quiz checks understanding of these steps and effects. This helps you create flexible and safe types easily.

Practice

1. What does a basic mapped type in TypeScript do?

easy

A. Runs a function on each property value at runtime

B. Imports types from external modules

C. Defines a class with mapped properties

D. Creates a new type by looping over keys of an existing type

Solution

1. Step 1: Understand mapped types concept

   Mapped types create new types by iterating over keys of an existing type, transforming them.

2. Step 2: Differentiate from runtime behavior

   Mapped types work at compile time for types, not runtime functions or imports.

3. Final Answer:

   Creates a new type by looping over keys of an existing type -> Option D

4. Quick Check:

   Mapped type = new type from keys [OK]

Hint: Mapped types loop keys to create new types [OK]

Common Mistakes:

• Confusing mapped types with runtime loops
• Thinking mapped types define classes
• Mixing mapped types with imports

2. Which of the following is the correct syntax for a basic mapped type in TypeScript?

easy

A. type NewType<T> = { K: T[K] }

B. type NewType<T> = (K in keyof T) => T[K]

C. type NewType<T> = { [K in keyof T]: T[K] }

D. type NewType<T> = { [K: string]: T }

Solution

1. Step 1: Identify mapped type syntax

   Mapped types use square brackets with 'in' keyword: {[K in keyof T]: T[K]}

2. Step 2: Check each option

   type NewType<T> = { [K in keyof T]: T[K] } matches correct syntax; B uses arrow function incorrectly; C lacks 'in' keyword; D uses string index, not keys of T.

3. Final Answer:

   type NewType<T> = { [K in keyof T]: T[K] } -> Option C

4. Quick Check:

   Mapped type syntax = {[K in keyof T]: T[K]} [OK]

Hint: Look for {[K in keyof T]: T[K]} pattern [OK]

Common Mistakes:

• Using arrow functions instead of mapped syntax
• Missing 'in' keyword inside brackets
• Using string index instead of keyof T

3. Given the type type Flags = { a: boolean; b: boolean; }, what is the type of type ReadonlyFlags = { readonly [K in keyof Flags]: Flags[K] }?

medium

A. { a: boolean; b: boolean; }

B. { readonly a: boolean; readonly b: boolean; }

C. { a?: boolean; b?: boolean; }

D. { [key: string]: boolean; }

Solution

1. Step 1: Understand the mapped type with readonly modifier

   The mapped type adds 'readonly' before each property key, making all properties readonly.

2. Step 2: Compare with original type

   Original Flags has mutable properties; ReadonlyFlags has same keys but readonly modifier added.

3. Final Answer:

   { readonly a: boolean; readonly b: boolean; } -> Option B

4. Quick Check:

   Readonly mapped type adds readonly modifier [OK]

Hint: Readonly mapped types add 'readonly' before keys [OK]

Common Mistakes:

• Ignoring readonly modifier effect
• Confusing optional properties with readonly
• Assuming type changes keys or values

4. Identify the error in this mapped type:

type PartialType<T> = { [K of keyof T]?: T[K] }

medium

A. Using 'of' instead of 'in' in the mapped type syntax

B. Missing semicolon after property declaration

C. Cannot use optional modifier '?' in mapped types

D. keyof T is invalid syntax

Solution

1. Step 1: Check mapped type syntax

   The correct keyword inside mapped types is 'in', not 'of'.

2. Step 2: Validate other parts

   Optional modifier '?' is valid; semicolon is optional; 'keyof T' is correct syntax.

3. Final Answer:

   Using 'of' instead of 'in' in the mapped type syntax -> Option A

4. Quick Check:

   Mapped types use 'in' keyword [OK]

Hint: Mapped types use 'in', not 'of' [OK]

Common Mistakes:

• Confusing 'in' with 'of' keyword
• Thinking '?' is invalid in mapped types
• Assuming semicolon is mandatory

5. How can you create a mapped type that makes all properties of a type optional and readonly in TypeScript?

hard

A. type OptionalReadonly<T> = { readonly [K in keyof T]?: T[K] }

B. type OptionalReadonly<T> = { [K in keyof T]: readonly T[K]? }

C. type OptionalReadonly<T> = { [K in keyof T]?: readonly T[K] }

D. type OptionalReadonly<T> = { readonly [K in keyof T]: T[K]? }

Solution

1. Step 1: Combine readonly and optional modifiers correctly

   In mapped types, 'readonly' goes before the key, and '?' after the key to make properties optional and readonly.

2. Step 2: Analyze each option

   type OptionalReadonly<T> = { readonly [K in keyof T]?: T[K] } correctly places 'readonly' before [K] and '?' after [K]. Options B, C, D misuse placement of modifiers.

3. Final Answer:

   type OptionalReadonly<T> = { readonly [K in keyof T]?: T[K] } -> Option A

4. Quick Check:

   Readonly + optional = readonly [K in keyof T]? [OK]

Hint: Put 'readonly' before and '?' after [K] in mapped types [OK]

Common Mistakes:

• Placing '?' before 'readonly'
• Putting 'readonly' after the key
• Misplacing optional modifier on type instead of key