Strict prop types and typed emits get most of the attention in Vue 3 + TypeScript setups, but / is where type safety quietly falls apart if you use the API the way the docs show it by default. without a type hint returns , which means every consumer of an injected value either casts it blindly or loses autocomplete entirely — and a typo in the injection key becomes a runtime instead of a compile-time error.
The Default Setup Is Untyped by Construction The naive version compiles, but gives you nothing: Nothing here catches a typo in the key string, and nothing tells the consumer what shape actually has.
Both problems come from using a plain string as the injection key.
InjectionKey Fixes Both Problems at Once Vue exports an type specifically for this.
Define it once, typed, and both and become fully type-checked against the same symbol: The in that last type isn't a quirk — it's being honest that a consumer might render without a matching provider above it in the tree, which is a real runtime possibility TypeScript is right to force you to handle.
Handling the undefined Case Without Littering ?.
Everywhere The common mistake is providing a default value to silence the type instead of actually checking for it: This works but hides a real bug — a component rendered outside its expected provider tree — behind a silent fallback.
For anything where the missing-provider case matters (which is most cases beyond pure UI theming), throw instead: Wrapping every injection in a small composable like rather than calling directly at each call site means the error message, the null check, and the type narrowing all live in exactly one place instead of being copy-pasted at every consumer.
Typing Injected Reactive State Correctly If the provided value is a or object, the generic should reflect that, not the unwrapped shape, or you'll fight the type checker over access: Getting this generic wrong — typing the key as when you're actually providing — is a common source of confusing type errors where seems to not exist on a type that should have it.
Where This Fits Into the Rest of Your Type Setup / is one piece of a larger strict-typing setup — it needs to sit alongside typed props, typed emits, and a properly configured to actually pay off.
If you haven't set up the rest of that foundation yet, this walkthrough of strict types for Vue 3 components covers , , composable typing, and the gradual-adoption path for turning on strict mode in an existing codebase without a full rewrite.