Powrót do: TypeScript dla Testera – Ekspresowe Podstawy (i za darmo!)
Operator warunkowy trójargumentowy (ternary)
TIP: Cały kod do poszczególnych lekcji, dodatkową teorię i linki z tej i innych lekcji - znajdziesz w darmowym repozytorium - https://github.com/jaktestowac/typescript-dla-testera
Chcesz dokładniej poznać TypeScript? Sprawdź nasz Program JavaScript i TypeScript dla Testerów
Prezentacja
Tu w przyszłości mogą pojawić się dodatkowe materiały w postaci prezentacji etc.
Dodatkowe materiały
Krótko: Operator trójargumentowy (zwany też operator warunkowy lub ?:) to wyrażenie, które ocenia warunek i zwraca jedną z dwóch wartości: warunek ? wartośćGdyPrawda : wartośćGdyFałsz
Jest idealny do krótkich wyborów, bo zwraca wartość (np. do przypisania), a nie wykonuje instrukcji.
Instrukcje if/else i switch lepiej nadają się do dłuższej logiki oraz wielu przypadków.
- Użyj ternary, gdy: wybierasz między dwiema krótkimi wartościami.
- Użyj if/else, gdy: masz więcej kroków (logi, walidacje), warunek jest złożony, lub potrzebujesz czytelnych bloków.
- Użyj switch, gdy masz wiele równoważnych.
- Czytelność: unikaj zagnieżdżonych ternary; przy 3+ wariantach zwykle lepszy będzie
switch.
Najważniejsze tematy w tej lekcji:
- Składnia:
warunek ? wartośćGdyPrawda : wartośćGdyFałsz. - Pamiętaj, że czytelność przede wszystkim! Używaj dla krótkich warunków, unikaj zagnieżdżania.
- Formatowanie wielolinijkowe i nawiasy przy złożonych warunkach.
TIP: Podstawowe użycie — wybór wartości na podstawie warunku.
// ✅ Keep it short and clear
const isProd: boolean = process.env.ENV === 'prod';
const baseUrl = isProd ? 'https://api.myapp.com' : 'https://staging.myapp.com';
const retries = isProd ? 3 : 1;
// Use ternary for values, not side effects
const label = isProd ? 'Production' : 'Staging';
TIP: Formatowanie i czytelność — gdy warunek lub gałęzie są dłuższe, rozbij na linie i dodaj nawiasy.
- Dłuższe wyrażenia: złam na kilka linii.
- Mieszanie z
&&/||: użyj nawiasów dla jasności. - Unikaj zagnieżdżonych ternary – lepiej użyć if lub switch.
// Multiline formatting
const statusText =
(response.ok && response.status < 300)
? 'Success'
: (response.status >= 500)
? 'Server error'
: 'Client error';
// Better (avoid nesting): map by key
type Level = 'low' | 'medium' | 'high';
const COLOR_BY_LEVEL: Record = { low: 'green', medium: 'gold', high: 'red' };
const color = COLOR_BY_LEVEL[level] ?? 'gray'; // no nested ternary needed
Praktyczne mini-przykłady
- Krótki wybór wartości:
const icon = isActive ? '✅' : '⏸️'; - Parametr funkcji:
log(level === 'error' ? 'E' : 'I', message); - Tekst w UI:
const badge = count > 0 ? `${count} items` : 'Empty';