Basic mapped type syntax in Typescript - Interactive Code Practice

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][1] };

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

A:

B!

C?

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' instead of '?' which defines the type but does not make it optional.

Using '!' which is a non-null assertion and not valid here.

The question mark (?) after the property name makes the property optional in a mapped type.

2fill in blank

medium

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

Typescript

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

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

Areadonly

Boptional

Cmutable

Dprivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'optional' which is not a TypeScript keyword.

Using 'private' which is an access modifier but not valid in mapped types.

The 'readonly' keyword before the property makes all properties readonly in the mapped type.

3fill in blank

hard

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

Typescript

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

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

Aboolean

BT[P]

Cnumber

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'T[P]' which keeps the original type instead of changing it.

Using 'number' or 'boolean' which changes the type but not to string.

To change all property types to string, use 'string' as the type for each property.

4fill in blank

hard

Fill both blanks to create a mapped type that makes all properties optional and readonly.

Typescript

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

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

Areadonly

B?

C!

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Placing '?' before the property name instead of after.

Using '!' which is not valid here.

Use 'readonly' before the property name and '?' after it to make properties readonly and optional.

5fill in blank

hard

Fill all three blanks to create a mapped type that changes all properties to readonly, optional, and of type number.

Typescript

type ReadonlyOptionalNumber<T> = { [1] [P in keyof T][2]: [3] };

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

Areadonly

B?

Cnumber

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' instead of 'number' for the property type.

Omitting '?' which makes properties required.

Use 'readonly' before the property name, '?' after it, and set the type to 'number' to achieve the desired 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