Mapped type with conditional types in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mapped type in TypeScript?

A mapped type creates a new type by transforming each property of an existing type. It uses syntax like { [K in keyof T]: ... } to loop over keys.

beginner

What does a conditional type do in TypeScript?

A conditional type chooses one type or another based on a condition, using syntax like T extends U ? X : Y. It works like an if-else for types.

intermediate

How do mapped types and conditional types work together?

You can use conditional types inside mapped types to change each property type based on a condition. For example, making some properties optional or changing their type.

intermediate

Example: What does this mapped type do?<br>

type ReadonlyIfString<T> = { [K in keyof T]: T[K] extends string ? Readonly : T[K] }

It makes properties readonly only if their type is string. Other properties keep their original type.

beginner

Why use mapped types with conditional types?

They let you create flexible types that adapt property types based on conditions, making your code safer and easier to maintain.

What does [K in keyof T] mean in a mapped type?

A Delete keys from T

B Loop over all keys of type T

C Create a new key K unrelated to T

D Assign a fixed key K

It loops over each key K in the keys of type T to create a new type.

In T extends U ? X : Y, what happens if T is assignable to U?

A Type becomes X

B Type becomes Y

C Type becomes T

D Type becomes U

If T fits U, the conditional type resolves to X.

Which is a valid use of conditional types inside a mapped type?

A Adding new properties

B Changing property names

C Changing property types based on their original type

D Removing keys from the original type

Conditional types can change property types but not keys or add/remove properties.

What does this type do?<br>

type OptionalIfNumber<T> = { [K in keyof T]: T[K] extends number ? T[K] | undefined : T[K] }

A Makes number properties readonly

B Makes all properties optional

C Removes number properties

D Makes number properties optional

It makes properties optional only if their type is number.

Why are mapped types with conditional types useful?

A They create flexible, type-safe transformations of object types

B They speed up runtime code

C They replace functions

D They allow dynamic property names

They help create new types by transforming existing ones safely and flexibly.

Explain how mapped types and conditional types can be combined to change property types based on their original types.

Think about looping over keys and using if-else logic for types.

Describe a real-life scenario where using a mapped type with conditional types would make your TypeScript code safer or easier to maintain.

Consider objects with mixed property types needing different rules.