Basic mapped type syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mapped type in TypeScript?

A mapped type creates a new type by transforming each property of an existing type using a template. It lets you apply the same operation to all properties easily.

beginner

Syntax of a basic mapped type

type NewType = { [Key in keyof OldType]: OldType[Key] }
This means: for each property Key in OldType, create a property Key with the same type.

beginner

What does keyof do in mapped types?

keyof extracts all property names (keys) of a type as a union of string literal types. It helps to loop over all keys in a mapped type.

intermediate

Example: Make all properties optional using mapped types

type Partial<T> = { [P in keyof T]?: T[P] }
This creates a new type where all properties of T are optional.

intermediate

Can mapped types change property types?

Yes! You can transform property types. For example, { [P in keyof T]: string } makes all properties have type string regardless of original type.

What does keyof return when used on a type?

A The type's methods only

B The type's values

C The type's constructor

D A union of the type's property names

keyof returns a union of all property names (keys) of a type.

Which syntax correctly defines a mapped type over type T?

A { [P in keyof T]: T[P] }

B { T in keyof P: P[T] }

C { [T of keyof P]: P[T] }

D { [P of T]: keyof P }

The correct syntax uses [P in keyof T] to iterate keys.

How to make all properties of a type optional using mapped types?

A { optional [P in keyof T]: T[P] }

B { [P in keyof T]?: T[P] }

C { [P in keyof T]: optional T[P] }

D { [P in keyof T]: T[P]? }

Adding ? after the property name makes it optional.

Can mapped types change the type of properties?

A Yes, they can assign new types to properties

B No, they only copy original types

C Only for string properties

D Only for number properties

Mapped types can transform property types to any new type.

What is the purpose of mapped types?

A To define classes

B To execute functions on objects

C To create new types by transforming properties of existing types

D To import modules

Mapped types help create new types by applying changes to each property of an existing type.

Explain how a basic mapped type works in TypeScript and give a simple example.

Think about looping over keys and creating a new type with the same properties.

Describe how you can use mapped types to make all properties of a type optional.

Focus on the question mark after the property name in the mapped type.

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