Basic mapped type syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a simple mapped type

What is the type of Result after this code runs?

Typescript

type Keys = 'a' | 'b' | 'c';
type Result = { [K in Keys]: number };

// What is the type of Result?

A { [key: string]: number }

B { a: string; b: string; c: string; }

C { a: number; b: number; c: number; }

D { a?: number; b?: number; c?: number; }

💡 Hint

Mapped types create a new type by looping over keys and assigning the given type.

The mapped type iterates over each key in 'Keys' and assigns the type 'number' to each property, resulting in an object type with keys 'a', 'b', and 'c' all typed as number.

❓ Predict Output

intermediate

Mapped type with readonly modifier

What is the type of ReadOnlyResult after this code runs?

Typescript

type Keys = 'x' | 'y';
type ReadOnlyResult = { readonly [K in Keys]: boolean };

// What is the type of ReadOnlyResult?

A { x?: boolean; y?: boolean; }

B { readonly x: boolean; readonly y: boolean; }

C { readonly [key: string]: boolean }

D { x: boolean; y: boolean; }

💡 Hint

The readonly modifier makes all properties immutable.

The mapped type applies the readonly modifier to each key in 'Keys', so the resulting type has readonly properties 'x' and 'y' both of type boolean.

❓ Predict Output

advanced

Mapped type with conditional type

What is the type of ConditionalResult after this code runs?

Typescript

type Keys = 'id' | 'name' | 'age';
type ConditionalResult = { [K in Keys]: K extends 'id' ? number : string };

// What is the type of ConditionalResult?

A { id: number; name: number; age: number; }

B { id?: number; name?: string; age?: string; }

C { id: string; name: string; age: string; }

D { id: number; name: string; age: string; }

💡 Hint

Conditional types can assign different types based on the key.

The mapped type checks if the key is 'id'; if yes, it assigns number, otherwise string. So 'id' is number, 'name' and 'age' are string.

❓ Predict Output

advanced

Mapped type with key remapping

What is the type of Remapped after this code runs?

Typescript

type Keys = 'a' | 'b';
type Remapped = { [K in Keys as `prefix_${K}`]: number };

// What is the type of Remapped?

A { prefix_a: number; prefix_b: number; }

B { a: number; b: number; }

C { prefix_a?: number; prefix_b?: number; }

D { [key: string]: number }

💡 Hint

Key remapping lets you change property names in mapped types.

The mapped type renames each key by prefixing it with 'prefix_', so keys become 'prefix_a' and 'prefix_b' with type number.

❓ Predict Output

expert

Complex mapped type with modifiers and key remapping

What is the type of Complex after this code runs?

Typescript

type Keys = 'one' | 'two';
type Complex = { +readonly [K in Keys as `_${K}`]-?: K extends 'one' ? string : number };

// What is the type of Complex?

A { readonly _one: string; readonly _two: number; }

B { _one?: string; _two?: number; }

C { _one: string; _two: number; }

D { readonly _one?: string; readonly _two?: number; }

💡 Hint

Modifiers + and - control readonly and optional flags; key remapping changes keys.

The +readonly adds readonly, -? removes optional, so properties are required and readonly. Keys are renamed with '_' prefix. 'one' maps to string, 'two' to number.

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