0 Tage Serie
javascript / expert
Snippet

Algebraische Datentypen mit erschöpfendem Pattern Matching

Die Verwendung von Tagged Unions ermöglicht eine präzise Modellierung von sich gegenseitig ausschließenden Zuständen in Next.js-Komponenten. Die Zuweisung des Typs 'never' im Default-Fall gewährleistet die Sicherheit zur Kompilierzeit und zwingt Entwickler dazu, jeden möglichen Zustandszweig explizit zu behandeln.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
type UIState =
| { type: 'IDLE' }
| { type: 'LOADING' }
| { type: 'SUCCESS'; data: string[] }
| { type: 'ERROR'; message: string };
function render(state: UIState) {
switch (state.type) {
case 'IDLE': return 'Standby';
case 'LOADING': return 'Loading...';
case 'SUCCESS': return `Found ${state.data.length} items`;
case 'ERROR': return `Error: ${state.message}`;
default: {
const _exhaustive: never = state;
throw new Error(`Unhandled state: ${_exhaustive}`);
}
}
}
nextjs
Erklärung
1
| { type: 'SUCCESS'; data: string[] }
Eine spezifische Variante des Union-Typs, die zusätzliche Nutzdaten enthält.
2
switch (state.type)
Verteilt die Logik basierend auf dem Diskriminator-Feld 'type'.
3
const _exhaustive: never = state;
TypeScript-Trick zur Sicherstellung der Vollständigkeit; die Kompilierung schlägt fehl, wenn ein Union-Mitglied fehlt.