Basic mapped type syntax in Typescript - Mini Project: Build & Apply

Basic mapped type syntax

📖 Scenario: You are working on a TypeScript project where you want to create a new type that changes all properties of an existing type to be optional.

🎯 Goal: Learn how to use basic mapped type syntax in TypeScript to create a new type with all properties optional.

📋 What You'll Learn

Create an interface called Person with exact properties

Create a mapped type called OptionalPerson that makes all Person properties optional

Use the mapped type syntax with keyof and in

Print the type of OptionalPerson to verify

💡 Why This Matters

🌍 Real World

Mapped types help you transform existing types easily, useful in large projects to create flexible data shapes.

💼 Career

Understanding mapped types is important for TypeScript developers to write clean, reusable, and type-safe code.

1

Create the Person interface

Create an interface called Person with these exact properties: name as string, age as number, and email as string.

Typescript

// Your code here

Hint

Use the interface keyword and define each property with its type.

2

Create the mapped type OptionalPerson

Create a mapped type called OptionalPerson that makes all properties of Person optional using keyof Person and in syntax with a ? modifier.

Typescript

interface Person {
  name: string;
  age: number;
  email: string;
}

// Your code here

Hint

Use type OptionalPerson = { [K in keyof Person]?: Person[K] } to make all properties optional.

3

Create a variable of type OptionalPerson

Create a variable called person1 of type OptionalPerson and assign it an object with only the name property set to "Alice".

Typescript

interface Person {
  name: string;
  age: number;
  email: string;
}

type OptionalPerson = {
  [K in keyof Person]?: Person[K];
};

// Your code here

Hint

Declare person1 with type OptionalPerson and assign an object with only name.

4

Print the person1 variable

Write a console.log statement to print the person1 variable.

Typescript

interface Person {
  name: string;
  age: number;
  email: string;
}

type OptionalPerson = {
  [K in keyof Person]?: Person[K];
};

const person1: OptionalPerson = {
  name: "Alice"
};

// Your code here

Hint

Use console.log(person1) to print the object.

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