CodeBlanks Logo Icon CodeBlanks
Login Register

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}`;

Practice 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.

Starter code

index.ts
// Mod adinda union tanimla
// Renk adinda union tanimla
// Sinif adinda template literal tur tanimla
// sinif degiskenini tanimla ve deger ata
// sinif yazdir

Sample solution

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

Expected output

btn-acik-kirmizi

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 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 Correct answer
  • Using the plain string type

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

2 Template with two unions

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

Explanation: The first union placed in the template is Mod; this produces combinations like `btn-light-red`.

3 Template literal summary

Term Meaning
`...${T}...` Template string type
union Produces combinations
mapped Per-key value
cartesian product All pairs

All lessons in Advanced

1 Advanced generics

  1. Variadic tuples
  2. Tuple inference
  3. Recursive generic types
  4. Summary - Advanced generics

2 Template literal types

  1. What is a template literal?
  2. Combination with union
  3. Generation with mapped
  4. Summary - Template literal types

3 Recursive types

  1. What is a recursive type?
  2. Tree types
  3. Deep partial
  4. Summary - Recursive types

4 Variance

  1. Covariance
  2. Contravariance
  3. Bivariance and strict
  4. Summary - Variance

5 Branded types

  1. What is a branded type?
  2. Brand definition
  3. Using brands
  4. Summary - Branded types

6 Phantom types

  1. What is a phantom type?
  2. State Encoding
  3. API with phantom
  4. Summary - Phantom types

7 Type narrowing

  1. typeof narrowing
  2. in operator
  3. instanceof
  4. Summary - Type narrowing

8 Discriminated unions

  1. What is a discriminated union?
  2. Literal discriminant
  3. Pattern matching
  4. Summary - Discriminated unions

9 Exhaustive check

  1. Exhaustive with never
  2. Switch exhaustive
  3. Compile-time safety
  4. Summary - Exhaustive check

10 Type guards

  1. User-defined type guard
  2. Assertion function
  3. Primitives guard
  4. Summary - Type guards

11 Assertion functions

  1. asserts is
  2. asserts defined
  3. Assertion vs throw
  4. Summary - Assertion functions

12 Strict null and definite assignment

  1. strictNullChecks deep
  2. Definite assignment
  3. Non-null assertion
  4. Summary - Strict null

13 Project: Type-safe compiler

  1. AST model
  2. Visitor design
  3. Type guards
  4. Exhaustive eval
  5. Integration

14 Advanced final

  1. Challenge 1: Type math
  2. Challenge 2: Variance
  3. Challenge 3: Branded + phantom
  4. Challenge 4: Mini compiler