Why mapped types are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a mapped type usage

What is the output of the following TypeScript code when compiled and run with Node.js (ignoring type errors)?

Typescript

type OptionsFlags<Type> = {
  [Property in keyof Type]: boolean;
};

interface Features {
  darkMode: () => void;
  newUserProfile: () => void;
}

const featureOptions: OptionsFlags<Features> = {
  darkMode: true,
  newUserProfile: false
};

console.log(featureOptions);

A TypeError at runtime

B {"darkMode":true,"newUserProfile":false}

C {"darkMode":() => void,"newUserProfile":() => void}

D SyntaxError during compilation

💡 Hint

Mapped types transform property types, here to boolean values.

The mapped type OptionsFlags converts each property type of Features to boolean. So the object featureOptions has boolean values for each key.

🧠 Conceptual

intermediate

Purpose of mapped types in TypeScript

Why are mapped types needed in TypeScript?

A To define runtime classes with inheritance.

B To execute asynchronous code more efficiently.

C To create new types by transforming properties of existing types systematically.

D To handle errors during program execution.

💡 Hint

Think about how you can reuse and modify existing type structures.

Mapped types allow you to create new types by applying a transformation to each property of an existing type, enabling flexible and reusable type definitions.

🔧 Debug

advanced

Identify the error in mapped type usage

What error does this TypeScript code produce?

Typescript

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

interface User {
  name: string;
  age: number;
}

const user: Readonly<User> = {
  name: "Alice",
  age: 30
};

user.age = 31;

A No error, code runs fine

B ReferenceError: user is not defined

C TypeError: Cannot assign to 'age' because it is a read-only property

D SyntaxError: Missing type annotation after property in mapped type

💡 Hint

Check the syntax of the mapped type declaration.

The mapped type syntax is missing the type annotation after the property name. It should be [P in keyof T]: T[P];

❓ Predict Output

advanced

Output of conditional mapped type

What is the output of this TypeScript code when compiled and run with Node.js (ignoring type errors)?

Typescript

type RemoveFunctions<T> = {
  [P in keyof T as T[P] extends Function ? never : P]: T[P];
};

interface Mixed {
  id: number;
  name: string;
  greet: () => void;
}

const obj: RemoveFunctions<Mixed> = {
  id: 1,
  name: "Bob"
};

console.log(obj);

A {"id":1,"name":"Bob"}

B TypeError at runtime

C SyntaxError during compilation

D {"id":1,"name":"Bob","greet":undefined}

💡 Hint

The mapped type uses conditional key remapping to exclude function properties.

Using key remapping with conditional types, function properties are excluded from the resulting type. Thus, obj only includes non-function properties id and name.

🧠 Conceptual

expert

Why mapped types improve code maintainability

How do mapped types improve code maintainability in large TypeScript projects?

A By allowing centralized and consistent transformations of types, reducing duplication and errors.

B By automatically optimizing runtime performance of JavaScript code.

C By replacing the need for interfaces and classes entirely.

D By enabling dynamic type changes during program execution.

💡 Hint

Think about how changing one type definition affects many related types.

Mapped types let you define transformations once and apply them everywhere, so changes propagate consistently and reduce bugs.