Generation with mapped

Learn to generate string types with mapped types.

What is mapped generation?

With a mapped type you can iterate over a union and produce a template literal value for each member. In the form [K in Union]: `data_${K}`, each key is bound to a string type containing its own name. This is a powerful way to produce type-safe dictionary types.

type Key = "name" | "age";
type Value = {
  [K in Key]: `data_${K}`;
};
// { name: "data_name"; age: "data_age" }

Key generation with remapping

In a mapped type, you can rename keys with the as keyword. In the form [K in Kaynak as `get_${K}`], a new template literal key is generated from each source key. This is ideal for producing getter/setter names.

type Source = "name" | "age";
type Get = {
  [K in Source as `get_${K}`]: string;
};
// { get_name: string; get_age: string }

Exercise Mapped type generating getters

Define a union named Kaynak: "ad" | "yas". Define a mapped type named Getir: for each K in Kaynak use [K in Kaynak as `get_${K}`]: string. The g variable should be of type Getir with value { get_ad: "Ali", get_yas: "30" }. Print g.get_ad with console.log.

Show example solution

type Kaynak = "ad" | "yas";
type Getir = {
  [K in Kaynak as `get_${K}`]: string;
};
const g: Getir = { get_ad: "Ali", get_yas: "30" };
console.log(g.get_ad);

Test yourself

What does the mapped type [K in Anahtar]: `veri_${K}` produce?
- A single combined string
- A template literal value for each key
- An empty object type
- A number array
Show answer

A template literal value for each key — The mapped type produces a separate template literal value for each key; the result is an object type binding each key to its own string value.

Key remapping variable

type Kaynak = "ad" | "yas";
type Getir = {
  [K in Kaynak as `get_${____}`]: string;
};

Show answer

type Kaynak = "ad" | "yas";
type Getir = {
  [K in Kaynak as `get_${K}`]: string;
};

Mapped generation concepts

[K in Union]

Mapped loop
as

Key renaming
`get_${K}`

Template key
K

Loop variable

Next lesson: Summary - Template literal types

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies