javascript / intermediate
Snippet
Modellierung diskriminierter Zustands-Union-Typen mit reaktiven Signals
Die Verwendung von TypeScript Discriminated Unions mit Angular Signals ermöglicht eine strikte Typprüfung über asynchrone Zustände hinweg und verhindert den Zugriff auf Nutzdaten im Fehler- oder Leerlaufzustand.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Injectable, signal, computed } from '@angular/core';type FetchStatus =| { state: 'idle' }| { state: 'loading' }| { state: 'success'; data: string[] }| { state: 'error'; message: string };@Injectable({ providedIn: 'root' })export class DataStateStore {private readonly statusSignal = signal<FetchStatus>({ state: 'idle' });readonly isLoaded = computed(() => this.statusSignal().state === 'success');readonly currentPayload = computed(() => {const s = this.statusSignal();return s.state === 'success' ? s.data : [];});setSuccess(payload: string[]): void {this.statusSignal.set({ state: 'success', data: payload });}}
angular
Erklärung
1
type FetchStatus = | { state: 'idle' } | ... | { state: 'success'; data: string[] };
Deklariert einen diskriminierten Union-Typ mit literalen Tags zur Gewährleistung der Typsicherheit.
2
private readonly statusSignal = signal<FetchStatus>({ state: 'idle' });
Hält den reaktiven Zustandscontainer, der mit dem typisierten Union-Typ parametrisiert ist.
3
return s.state === 'success' ? s.data : [];
Schränkt den Union-Typ über den State-Diskriminator ein, um sicher auf die data-Eigenschaft zuzugreifen.