Mapped type for deep transformations in Typescript - Mini Project: Build & Apply

Mapped type for deep transformations

📖 Scenario: Imagine you have a complex object with nested properties. You want to create a new type that changes all the properties deeply, for example, making all properties readonly at every level.

🎯 Goal: You will build a DeepReadonly mapped type that makes every property of an object and its nested objects readonly.

📋 What You'll Learn

Create a nested object type called Settings with exact properties

Create a mapped type called DeepReadonly that recursively makes properties readonly

Use DeepReadonly to create a readonly version of Settings

Print the readonly object to verify the type works

💡 Why This Matters

🌍 Real World

Making objects deeply readonly is useful in large applications to prevent accidental changes to configuration or state objects.

💼 Career

Understanding mapped types and recursive type transformations is important for TypeScript developers working on complex codebases and libraries.

1

Create the nested object type Settings

Create a TypeScript type called Settings with these exact properties: theme as a string, version as a number, and options as an object with darkMode as boolean and languages as a string array.

Typescript

# Your code here

Need a hint?

Use type Settings = { ... } and define nested properties exactly as described.

2

Create the mapped type DeepReadonly

Create a mapped type called DeepReadonly that takes a generic type T and makes all properties readonly recursively. Use readonly [P in keyof T] and conditional types to check if T[P] is an object to apply DeepReadonly again.

Typescript

type Settings = {
  theme: string;
  version: number;
  options: {
    darkMode: boolean;
    languages: string[];
  };
};

# Your code here

Need a hint?

Use a mapped type with readonly and a conditional type to recurse on nested objects.

3

Create a readonly version of Settings using DeepReadonly

Create a type called ReadonlySettings by applying DeepReadonly to Settings. Then create a constant settings of type ReadonlySettings with the exact values: theme as "dark", version as 1, options.darkMode as true, and options.languages as ["en", "fr"].

Typescript

type Settings = {
  theme: string;
  version: number;
  options: {
    darkMode: boolean;
    languages: string[];
  };
};

type DeepReadonly = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly : T[P];
};

# Your code here

Need a hint?

Use type ReadonlySettings = DeepReadonly<Settings> and create a constant settings with the exact values.

4

Print the readonly settings object

Write a console.log statement to print the settings object.

Typescript

type Settings = {
  theme: string;
  version: number;
  options: {
    darkMode: boolean;
    languages: string[];
  };
};

type DeepReadonly = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly : T[P];
};

// Create readonly version
 type ReadonlySettings = DeepReadonly;

const settings: ReadonlySettings = {
  theme: "dark",
  version: 1,
  options: {
    darkMode: true,
    languages: ["en", "fr"]
  }
};

# Your code here

Need a hint?

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