Wyrażenie switch, czyli alternatywa dla if + QUIZ

Powrót do: TypeScript dla Testera – Ekspresowe Podstawy (i za darmo!)

Wyrażenie switch, czyli alternatywa dla if + QUIZ

Prezentacja

Tu w przyszłości mogą pojawić się dodatkowe materiały w postaci prezentacji etc.

Dodatkowe materiały

Konstrukcja switch to czytelna alternatywa dla wielu if/else if przy podejmowaniu decyzji na podstawie konkretnych wartości (np. string, number, enum).

Sprawdza się, gdy masz kilka równorzędnych przypadków. Do zakresów/warunków złożonych zwykle lepszy będzie if.

Najważniejsze tematy w tej lekcji:

• Składnia switch (expr) { case ...: ...; break; default: ... } i rola break.
• Dobre praktyki: unikanie niechcianego fall-through, grupowanie przypadków, early return.
• Proste użycie z typami dosłownymi i enumami; egzekwowanie kompletności przypadków.
• Kiedy nie używać switch: warunki zakresowe, pojedynczy boolean, bardzo proste decyzje.

Podstawowe użycie switch z przerwaniem break:

// Basic switch with break
const env = (process.env.ENV ?? 'dev').toLowerCase();


let baseUrl: string;
switch (env) {
  case 'prod':
    baseUrl = 'https://api.myapp.com';
    break;
  case 'staging':
    baseUrl = 'https://staging.myapp.com';
    break;
  case 'dev':
  default:
    baseUrl = 'http://localhost:3000';
    break;
}
console.log(baseUrl);
  

Grupowanie przypadków i early return poprawiają czytelność.

// Group related cases; return early -> no need for break
function severityIcon(level: 'info' | 'warn' | 'error' | 'fatal'): string {
  switch (level) {
    case 'info':
      return 'ℹ️';
    case 'warn':
      return '⚠️';
    case 'error':
    case 'fatal': // grouped
      return '🔥';
    default: {
      // exhaustive check (will error if new value appears)
      const _never: never = level;
      return _never;
    }
  }
}
  

Unikaj niezamierzonego fall-through. Jeśli jest celowy — dodaj komentarz.

// ❌ Missing break -> unintended fall-through
switch (command) {
  case 'start':
    startJob();
    // break; // missing -> will also run 'status'
  case 'status':
    printStatus();
    break;
}


// ✅ Intentional fall-through is documented
switch (command) {
  case 'init':
    setup();
    // falls through
  case 'start':
    startJob();
    break;
  default:
    help();
    break;
}
  

Linki zewnętrzne

• MDN: switch
• TypeScript Handbook: Narrowing
• TypeScript: Enums

Zadania

Przygotowaliśmy dla Ciebie kilka zadań-zagadek, które pozwolą Ci utrwalić wiedzę 😉

Zadanie 1

Treść zadania: Co zostanie wyświetlone w konsoli?

const status = 'warn';

switch (status) {
  case 'ok':
    console.log('OK');
    break;
  case 'warn':
    console.log('WARN');
  case 'error':
    console.log('ERROR');
    break;
  default:
    console.log('DEFAULT');
}

Zadanie 2

Treść zadania: Jaki będzie wynik w konsoli?

function canEdit(role: 'admin' | 'editor' | 'viewer'): boolean {
  switch (role) {
    case 'admin':
    case 'editor':
      return true;
    case 'viewer':
      return false;
  }
}

console.log(canEdit('viewer'));

Zadanie 3

Treść zadania: Co trafi do konsoli i dlaczego?

const cmd = 'Start';

switch (cmd) {
  case 'start':
    console.log('A');
    break;
  case 'stop':
    console.log('B');
    break;
  default:
    console.log('C');
}

Zadanie 4

Treść zadania: Co zostanie wypisane?

let i = 0;

switch (++i) {  // expression evaluated once, then matched strictly
  case 1:
    console.log('one');
    break;
  case 2:
    console.log('two');
    break;
}
console.log(i);