javascript / expert
Snippet
Typsichere Dependency Injection mit InjectionKey
Die Verwendung von Symbols mit InjectionKey stellt sicher, dass Ihre Provide/Inject-Architektur sowohl eindeutig als auch typsicher ist. Dies verhindert Namenskollisionen in großen Anwendungen und ermöglicht es TypeScript, die exakte Struktur der injizierten Abhängigkeit abzuleiten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { provide, inject, InjectionKey } from 'vue';interface AuthService {login: () => Promise<void>;user: string;}export const AuthKey: InjectionKey<AuthService> = Symbol('AuthService');// Providerprovide(AuthKey, {user: 'Admin',login: async () => {}});// Consumerconst auth = inject(AuthKey);if (!auth) throw new Error('AuthService not provided');
vue
Erklärung
1
export const AuthKey: InjectionKey<AuthService> = Symbol('AuthService');
Erstellt einen eindeutigen Symbol-Key, der mit einem spezifischen TypeScript-Interface verknüpft ist.
2
provide(AuthKey, { ... });
Registriert die Abhängigkeit in der Komponentenhierarchie unter Verwendung des typisierten Keys.
3
const auth = inject(AuthKey);
Ruft die Abhängigkeit mit vollständiger TypeScript-Autovervollständigung und Typprüfung ab.