Why Basic mapped type syntax in Typescript? - Purpose & Use Cases

The Big Idea

What if you could change every property in a type with just one simple rule?

The Scenario

Imagine you have an object with many properties, and you want to create a new object where each property has a different type or is optional. Doing this by hand means writing out each property and its new type one by one.

The Problem

This manual way is slow and boring. If the object has many properties, you might make mistakes or forget to update some when the original object changes. It's hard to keep track and easy to get tired.

The Solution

Basic mapped type syntax lets you write a simple rule that automatically changes every property in an object type. You write the rule once, and TypeScript applies it to all properties, saving time and avoiding errors.

Before vs After

✗ Before

type User = { name: string; age: number; };
type PartialUser = { name?: string; age?: number; };

✓ After

type User = { name: string; age: number; };
type PartialUser = { [K in keyof User]?: User[K] };

What It Enables

This lets you quickly create new types based on existing ones, changing all properties at once with a clear, simple rule.

Real Life Example

When building a form, you might want a version of your data type where all fields are optional so users can fill in only some parts. Mapped types make this easy and safe.

Key Takeaways

Manual property changes are slow and error-prone.

Mapped types apply changes to all properties automatically.

This saves time and keeps your code consistent.

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