Why mapped types are needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a mapped type that makes all properties optional.

Typescript

type PartialType<T> = { [P in keyof T]?: T[1] };

Drag options to blanks, or click blank then click option'

A[P]

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use keyof to get keys.

Using incorrect syntax for mapped types.

The syntax [P in keyof T] iterates over all keys of T to create a mapped type.

2fill in blank

medium

Complete the code to create a mapped type that makes all properties readonly.

Typescript

type ReadonlyType<T> = { readonly [P in keyof T][1] T[P] };

Drag options to blanks, or click blank then click option'

A=

B:

C=>

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using equals = instead of colon :.

Using arrow => which is for functions.

The colon : separates the property name from its type in mapped types.

3fill in blank

hard

Fix the error in the mapped type that tries to change all properties to string.

Typescript

type Stringify<T> = { [P in keyof T]: [1] };

Drag options to blanks, or click blank then click option'

Anumber

BT[P]

Cany

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using T[P] which keeps original types.

Using unrelated types like number.

To change all property types to string, assign string as the type.

4fill in blank

hard

Fill both blanks to create a mapped type that makes all properties nullable.

Typescript

type Nullable<T> = { [P in [1]]: T[P][2] null };

Drag options to blanks, or click blank then click option'

Akeyof T

B| null

CT

D& null

Attempts:

3 left

💡 Hint

Common Mistakes

Using T instead of keyof T for keys.

Using & null which is intersection, not union.

Use keyof T to iterate keys and | null to add nullability.

5fill in blank

hard

Fill all three blanks to create a mapped type that picks only string properties from a type.

Typescript

type PickStrings<T> = { [[1] in keyof T as T[[2]] extends [3] ? [1] : never]: T[[1]] };

Drag options to blanks, or click blank then click option'

AP

Cstring

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for keys in the two places.

Using number instead of string in the condition.

This uses key remapping in mapped types to select keys where the property type extends string.

Practice

1. Why are mapped types needed in TypeScript?

easy

A. To create new types by transforming all properties of an existing type easily

B. To write functions that return multiple values

C. To define classes with private members

D. To handle asynchronous operations

Solution

1. Step 1: Understand the purpose of mapped types

   Mapped types allow you to take an existing type and create a new type by changing all its properties in a consistent way.

2. Step 2: Compare with other options

   Options B, C, and D relate to other TypeScript or JavaScript features but do not describe mapped types.

3. Final Answer:

   To create new types by transforming all properties of an existing type easily -> Option A

4. Quick Check:

   Mapped types = transform all properties easily [OK]

Hint: Mapped types transform all properties of a type at once [OK]

Common Mistakes:

• Confusing mapped types with functions or classes
• Thinking mapped types handle async code
• Believing mapped types define private members

2. Which of the following is the correct syntax to create a mapped type that makes all properties of T readonly?

easy

A. type Readonly<T> = { [P in T]: readonly T[P] }

B. type Readonly<T> = { [P in keyof T]: readonly T[P] }

C. type Readonly<T> = { readonly T[P] in keyof T }

D. type Readonly<T> = { readonly [P in keyof T]: T[P] }

Solution

1. Step 1: Analyze mapped type syntax

   The correct syntax uses [P in keyof T] to iterate over keys and applies readonly before the property name.

2. Step 2: Identify errors in other options

   type Readonly<T> = { [P in keyof T]: readonly T[P] } incorrectly places readonly after the colon. type Readonly<T> = { [P in T]: readonly T[P] } uses [P in T] which is invalid. type Readonly<T> = { readonly T[P] in keyof T } has incorrect order and syntax.

3. Final Answer:

   type Readonly<T> = { readonly [P in keyof T]: T[P] } -> Option D

4. Quick Check:

   Mapped type syntax = readonly before [P in keyof T] [OK]

Hint: Use 'readonly [P in keyof T]' to make properties readonly [OK]

Common Mistakes:

• Placing readonly after the property type
• Using wrong iteration syntax like [P in T]
• Misordering readonly and the mapped key

3. Given the code below, what is the type of OptionalUser?

type User = { id: number; name: string; };
type OptionalUser = { [P in keyof User]?: User[P] };

medium

A. { id: number; name: string; }

B. { id: number | undefined; name: string | undefined; }

C. { id?: number; name?: string; }

D. Error: Invalid mapped type syntax

Solution

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

   The ? after [P in keyof User] makes each property optional.

2. Step 2: Compare with options

   { id?: number; name?: string; } correctly shows all properties optional. { id: number; name: string; } is original type. { id: number | undefined; name: string | undefined; } uses union with undefined which is different. Error: Invalid mapped type syntax is incorrect as syntax is valid.

3. Final Answer:

   { id?: number; name?: string; } -> Option C

4. Quick Check:

   Mapped type with ? = all properties optional [OK]

Hint: Adding ? after [P in keyof T] makes properties optional [OK]

Common Mistakes:

• Confusing optional properties with union types
• Thinking original type remains unchanged
• Assuming syntax error in mapped types

4. Identify the error in the following mapped type and fix it:

type ReadonlyUser<T> = { [P in keyof T] T[P] readonly }

medium

A. Remove readonly modifier completely

B. The readonly modifier should come before the property name: { readonly [P in keyof T]: T[P] }

C. Change keyof T to keyof User

D. Add a semicolon after T[P]

Solution

1. Step 1: Check mapped type syntax

   The readonly modifier must be placed before the property name in mapped types.

2. Step 2: Correct the syntax

   Rewrite as { readonly [P in keyof T]: T[P] } to fix the error.

3. Final Answer:

   The readonly modifier should come before the property name: { readonly [P in keyof T]: T[P] } -> Option B

4. Quick Check:

   readonly before [P in keyof T] fixes syntax [OK]

Hint: Place readonly before the mapped key, not after the type [OK]

Common Mistakes:

• Putting readonly after the property type
• Confusing property name and type order
• Ignoring mapped type syntax rules

5. You want to create a mapped type that converts all properties of a type T to strings, regardless of their original type. Which mapped type correctly achieves this?

hard

A. type Stringify<T> = { [P in keyof T]: string }

B. type Stringify<T> = { [P in keyof T]: T[P] extends string ? string : never }

C. type Stringify<T> = { [P in keyof T]: T[P] & string }

D. type Stringify<T> = { [P in keyof T]: keyof string }

Solution

1. Step 1: Understand the goal

   We want all properties to become type string, ignoring original types.

2. Step 2: Analyze each option

   type Stringify<T> = { [P in keyof T]: string } sets every property to string directly. type Stringify<T> = { [P in keyof T]: T[P] extends string ? string : never } uses conditional types but returns never for non-string types, which is incorrect. type Stringify<T> = { [P in keyof T]: T[P] & string } intersects with string, which does not convert types. type Stringify<T> = { [P in keyof T]: keyof string } uses keyof string which is invalid.

3. Final Answer:

   type Stringify<T> = { [P in keyof T]: string } -> Option A

4. Quick Check:

   Assign string directly to all properties [OK]

Hint: Assign string type directly to all keys in mapped type [OK]

Common Mistakes:

• Using conditional types incorrectly
• Trying to intersect types instead of replacing
• Misusing keyof operator on primitive types