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.