0 Tage Serie
javascript / expert
Snippet

Entkoppelte Service-Architekturen mit Symbols

Die Verwendung von String-Keys für Dependency Injection (provide/inject) kann zu Namenskollisionen führen. Symbols garantieren Eindeutigkeit und ermöglichen eine bessere Entkopplung zwischen den Anforderungen der Komponente und der tatsächlichen Implementierung, die im App-Root bereitgestellt wird.

snippet.js
javascript
1
2
3
4
5
6
7
8
export const ApiServiceKey = Symbol('ApiService');
// In main.ts:
app.provide(ApiServiceKey, new RealApiService());
// In a component:
const api = inject(ApiServiceKey);
if (!api) throw new Error('ApiService not provided');
vue
Erklärung
1
export const ApiServiceKey = Symbol('ApiService');
Definiert einen eindeutigen Identifikator für den Dienst, der nicht versehentlich überschrieben werden kann.
2
app.provide(ApiServiceKey, ...);
Registriert die konkrete Implementierung auf Anwendungsebene.
3
const api = inject(ApiServiceKey);
Fordert die Abhängigkeit innerhalb einer beliebigen untergeordneten Komponente an.
4
if (!api) throw new Error(...);
Stellt sicher, dass der Dienst vorhanden ist, und liefert eine klare Fehlermeldung, falls die Injection fehlschlägt.