Mapped type with template literals in Typescript - Step-by-Step Execution

Concept Flow - Mapped type with template literals

Start with base type

↓

Iterate over keys with 'keyof'

↓

Apply template literal to each key

↓

Create new mapped type with modified keys

↓

Result: type with new keys and original values

This flow shows how TypeScript creates a new type by looping over keys of an existing type and changing each key using template literals.

Execution Sample

Typescript

type Person = {
  name: string;
  age: number;
};

type PrefixedPerson = {
  [K in keyof Person as `get${Capitalize<string & K>}`]: () => Person[K];
};

This code creates a new type with keys prefixed by 'get' and capitalized, each returning the original property type as a function.

Execution Table

Step	Key (K)	Template Literal Key	Mapped Key	Value Type
1	name	`get${Capitalize<'name'>}`	getName	() => string
2	age	`get${Capitalize<'age'>}`	getAge	() => number
3	-	-	-	Mapped type complete with keys getName and getAge

💡 All keys of Person processed, mapped type created with new keys and function types.

Variable Tracker

Variable	Start	After 1	After 2	Final
K	-	name	age	-
Mapped Key	-	getName	getAge	-
Value Type	-	() => string	() => number	-

Key Moments - 2 Insights

Why do we use 'as' in the mapped type?

The 'as' keyword renames each key using the template literal. Without it, keys stay the same. See execution_table rows 1 and 2 where keys change from 'name' to 'getName'.

What does 'Capitalize<string & K>' do?

It capitalizes the first letter of each key string. For example, 'name' becomes 'Name'. This is shown in execution_table where 'name' becomes 'getName'.

Visual Quiz - 3 Questions

Look at the execution table, what is the mapped key for the original key 'age'?

A getage

B Age

C getAge

D age

💡 Hint

Check the 'Mapped Key' column in row 2 of the execution_table.

At which step does the mapped type finish creating all keys?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the exit note and the last row in execution_table.

If we remove 'Capitalize' from the template literal, what would the mapped key for 'name' be?

A getName

B getname

C Name

D name

💡 Hint

Refer to how 'Capitalize' changes 'name' to 'Name' in the execution_table.

Concept Snapshot

Mapped types loop over keys of a type.
Use 'as' with template literals to rename keys.
Template literals can modify keys dynamically.
Capitalize utility changes first letter uppercase.
Result is a new type with transformed keys and original values.

Full Transcript

This visual execution shows how TypeScript creates a mapped type using template literals. Starting from a base type with keys 'name' and 'age', it loops over each key. For each key, it applies a template literal that prefixes 'get' and capitalizes the key. This renames 'name' to 'getName' and 'age' to 'getAge'. The mapped type then assigns each new key a function type returning the original property type. The execution table traces each step, showing key transformation and value types. Key moments clarify why 'as' is needed to rename keys and how 'Capitalize' works. The quiz tests understanding of key renaming and the mapping process. This helps beginners see how mapped types with template literals create new types with dynamic keys.