Без типизации `inject` возвращает `unknown` — приходится кастить. `InjectionKey` решает это. **Базовый паттерн:** ```typescript // keys/injection-keys.ts import type { InjectionKey, Ref } from 'vue' export interface User { id: number name: string role: 'admin' | 'user' } export interface AuthContext { user: Ref isAuthenticated: ComputedRef login: (credentials: { email: string; password: string }) => Promise logout: () => void } // Символ с привязанным типом export const AuthKey: InjectionKey = Symbol('auth') export const ThemeKey: InjectionKey> = Symbol('theme') export const ApiKey: InjectionKey = Symbol('api') ``` ```vue ``` ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Модальные окна — provide контроллера:** ```typescript // keys.ts export interface ModalController { open: (component: Component, props?: Record) => Promise close: (result?: unknown) => void } export const ModalKey: InjectionKey = Symbol('modal') // composable export function useModal(): ModalController { const controller = inject(ModalKey) if (!controller) throw new Error('ModalProvider not found') return controller } // Использование const modal = useModal() const result = await modal.open(ConfirmDialog, { message: 'Удалить?', }) ``` 🔹 **Конфигурация компонента-библиотеки:** ```typescript // ui-config.ts export interface UIConfig { size: 'sm' | 'md' | 'lg' variant: 'filled' | 'outlined' locale: string } export const UIConfigKey: InjectionKey> = Symbol('ui-config') // Provider provide(UIConfigKey, { size: 'md', locale: 'ru' }) // В каждом базовом компоненте const config = inject(UIConfigKey, {}) const resolvedSize = computed(() => props.size ?? config.size ?? 'md') ``` --- ## Частые ошибки ❌ Строковые ключи — нет типобезопасности: ```typescript provide('user', currentUser) const user = inject('user') // unknown — потерял тип const user = inject('user') as User // Ручной каст — хрупко ``` ✅ Символьные ключи с `InjectionKey`: ```typescript const UserKey: InjectionKey = Symbol('user') provide(UserKey, currentUser) // Проверит тип value const user = inject(UserKey) // User | undefined — автоматически ``` --- ❌ Игнорировать `undefined` из inject: ```typescript const auth = inject(AuthKey) // AuthContext | undefined auth.login(creds) // Runtime error, если provider не найден! ``` ✅ Guard через composable или проверку: ```typescript export function useAuth(): AuthContext { const auth = inject(AuthKey) if (!auth) throw new Error('AuthProvider missing') return auth // AuthContext — без undefined } ``` --- ❌ Provide reactive-значение без Ref — теряется реактивность: ```typescript const theme = ref('dark') provide(ThemeKey, theme.value) // Строка 'dark' — НЕ реактивная! ``` ✅ Передавай ref целиком: ```typescript provide(ThemeKey, theme) // Ref — реактивный // Или readonly для защиты provide(ThemeKey, readonly(theme)) ``` --- ## Резюме | Подход | Типобезопасность | Рекомендация | |---|---|---| | `inject('string')` | Нет (`unknown`) | Не использовать | | `inject(InjectionKey)` | Полная | Базовый уровень | | `useXxx()` composable | Полная + runtime guard | Рекомендация | 🔑 `InjectionKey` + Symbol + composable-обёртка = типобезопасный provide/inject. Composable добавляет runtime-проверку и убирает `undefined` из типа. ---

Как типизировать provide/inject с TypeScript?