Overview - Basic mapped type syntax

What is it?

Basic mapped type syntax in TypeScript lets you create new types by transforming each property of an existing type. It works by looping over the keys of a type and applying changes to each property. This helps you build flexible and reusable types without writing repetitive code.

Why it matters

Without mapped types, you would have to manually write similar types for each variation, which is slow and error-prone. Mapped types save time and reduce mistakes by automating type transformations. This makes your code easier to maintain and adapt as your project grows.

Where it fits

Before learning mapped types, you should understand TypeScript basic types, interfaces, and type aliases. After this, you can explore advanced mapped types, conditional types, and utility types that build on this foundation.

Mental Model

Core Idea

Mapped types create new types by repeating a pattern over each property of an existing type.

Think of it like...

Imagine you have a set of keys on a keyring, and you want to paint each key a different color. Instead of painting each key by hand, you use a machine that automatically paints every key the same way. Mapped types are like that machine for types.

Original Type
┌─────────────┐
│ name: string│
│ age: number │
└─────────────┘
       ↓ map over keys
Mapped Type
┌─────────────┐
│ name: T    │
│ age: T     │
└─────────────┘

Build-Up - 7 Steps

1

FoundationUnderstanding TypeScript Types

Concept: Learn what types and interfaces are in TypeScript.

Types describe the shape of data. For example, an interface Person { name: string; age: number } means a Person has a name and age with specific types.

Result

You can define and check data shapes to avoid errors.

Knowing how to define types is the base for creating more complex types like mapped types.

2

FoundationWhat Are Type Keys?

3

IntermediateBasic Mapped Type Syntax

4

IntermediateUsing keyof with Mapped Types

5

IntermediateModifying Property Modifiers

6

AdvancedCombining Mapped Types with Index Signatures

7

ExpertMapped Types and Type Inference Surprises

Under the Hood

Mapped types work by the TypeScript compiler iterating over each key in the source type's key set. For each key, it creates a new property in the resulting type, applying any modifiers or transformations specified. This happens at compile time and does not affect runtime JavaScript. The compiler uses the keyof operator to get keys and then constructs a new type object with transformed properties.

Why designed this way?

Mapped types were introduced to reduce repetitive code and improve type reuse. Before mapped types, developers had to manually write similar types for each variation, which was error-prone and tedious. The design leverages TypeScript's powerful type system and compile-time evaluation to automate these patterns, balancing flexibility and type safety.

┌───────────────┐
│ Original Type │
│ {            │
│  name: string │
│  age: number  │
│ }            │
└─────┬─────────┘
      │ keyof T
      ▼
┌─────────────────────────────┐
│ Mapped Type Syntax           │
│ {[K in keyof T]: T[K]}       │
│ Apply modifiers or changes   │
└─────────────┬───────────────┘
              │
              ▼
┌─────────────────────────────┐
│ Resulting Type               │
│ {                           │
│  name: ModifiedType          │
│  age: ModifiedType           │
│ }                           │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do mapped types create new types at runtime or only at compile time? Commit to your answer.

Common Belief:Mapped types create new objects or classes at runtime.

Tap to reveal reality

Quick: Do mapped types always preserve exact property types without change? Commit to yes or no.

Common Belief:Mapped types always keep property types exactly as in the original type.

Tap to reveal reality

Quick: Can you use mapped types to add new properties not in the original type? Commit to yes or no.

Common Belief:Mapped types can add new keys beyond the original type's keys.

Tap to reveal reality

Quick: Do mapped types work with any kind of type, including primitives? Commit to yes or no.

Common Belief:Mapped types can be applied to any type, including primitives like string or number.

Tap to reveal reality

Expert Zone

1

Mapped types can be combined with conditional types to create highly dynamic and context-sensitive type transformations.

2

Using the -readonly and +readonly modifiers in mapped types allows precise control over property mutability, which is crucial in large codebases.

3

Mapped types sometimes cause subtle inference issues with literal types, requiring explicit annotations or helper types to maintain exactness.

When NOT to use

Avoid mapped types when you need runtime behavior or when working with primitive types. For adding new properties beyond existing keys, use intersection types or interfaces. Also, if type transformations become too complex, consider simplifying your design or using utility types provided by TypeScript.

Production Patterns

In real-world projects, mapped types are used to create utility types like Readonly, Partial, and Record. They help enforce immutability, optional properties, and dynamic key-value mappings. Experts often combine mapped types with generics and conditional types to build flexible APIs and libraries that adapt to different data shapes.

Connections

Functional Programming Map Function

Mapped types conceptually mirror the map function that transforms each element in a list.

Understanding how map applies a function to each item helps grasp how mapped types apply transformations to each property key.

Database Schema Migration

Mapped types resemble schema migration scripts that update each column's properties systematically.

Seeing mapped types as a way to 'migrate' or transform data shapes clarifies their role in evolving code safely.

Genetic Algorithms

Mapped types share the idea of applying a uniform operation across a set to produce variations.

Recognizing this pattern across domains highlights the power of systematic transformation for creating diversity or flexibility.

Common Pitfalls

#1Trying to map over a primitive type like string.

Wrong approach:type MappedString = { [K in keyof string]: string[K] };

Correct approach:type MappedObject = { [K in keyof T]: T[K] }; // Use only with object types

Root cause:Mapped types require keys to iterate over; primitives have no keys, causing errors.

#2Assuming mapped types add new properties not in the original type.

Wrong approach:type AddProp = { [K in keyof T | 'newProp']: T[K] };

Correct approach:type AddProp = T & { newProp: string }; // Use intersection to add properties

Root cause:Mapped types only transform existing keys; adding keys needs intersections or extensions.

#3Not controlling readonly modifier leads to unexpected immutability.

Wrong approach:type ReadonlyCopy = { [K in keyof T]: T[K] }; // misses readonly

Correct approach:type ReadonlyCopy = { readonly [K in keyof T]: T[K] }; // adds readonly

Root cause:Forgetting to add or remove modifiers causes properties to behave differently than intended.

Key Takeaways

Mapped types let you create new types by repeating a pattern over each property of an existing type.

They use the syntax {[K in keyof T]: ...} to loop over keys and transform properties.

Mapped types exist only at compile time and do not produce runtime code.

Modifiers like readonly and optional can be added or removed in mapped types to control property behavior.

Understanding mapped types unlocks powerful, reusable, and flexible type transformations in TypeScript.