Summary - Template literal types

Write a CSS class name generator with template literals.

Summary - Template literal types

In this group you learned template literal types: backtick and ${} create type-level template strings; unions produce a cartesian product; mapped types produce a template literal value or key for each key. Together you can type-safely define names with fixed options such as CSS class names.

type Color = "red" | "blue";
type Mode = "light" | "dark";
type Class = `btn-${Mode}-${Color}`;

Exercise Write a CSS class generator

Define a union named Mod: "acik" | "koyu". Define a union named Renk: "kirmizi" | "mavi". Define a template literal type named Sinif: `btn-${Mod}-${Renk}`. The sinif variable should be of type Sinif with value "btn-acik-kirmizi". Print sinif with console.log.

Show example solution

type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${Mod}-${Renk}`;
const sinif: Sinif = "btn-acik-kirmizi";
console.log(sinif);

Test yourself

What is the best way to define CSS class names type-safely?
- Leaving it to any
- Using the number type
- Using template literal type and union
- Using the plain string type
Show answer

Using template literal type and union — Template literal type and union together produce types that accept only valid combinations of fixed options; this is the most type-safe way.

Template with two unions

type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${____}-${Renk}`;

Show answer

type Mod = "acik" | "koyu";
type Renk = "kirmizi" | "mavi";
type Sinif = `btn-${Mod}-${Renk}`;

Template literal summary

`...${T}...`

Template string type
union

Produces combinations
mapped

Per-key value
cartesian product

All pairs

Next lesson: What is a recursive type?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies