1# Vue TypeScript Patterns
2 
3TypeScript-specific patterns for Vue 3 development.
4 
5## Provide/Inject Types
6 
7Use `InjectionKey` for type-safe dependency injection:
8 
9```ts
10import type { InjectionKey } from 'vue'
11import type { User } from './types'
12 
13// Define typed key
14export const UserKey: InjectionKey<User> = Symbol('user')
15 
16// Provider component
17const user = ref<User>({ id: 1, name: 'John' })
18provide(UserKey, user)
19 
20// Consumer component
21const user = inject(UserKey) // Ref<User> | undefined
22const user = inject(UserKey)! // Ref<User> (assert non-null)
23```
24 
25**With default value:**
26 
27```ts
28const user = inject(UserKey, ref({ id: 0, name: 'Guest' }))
29// Type: Ref<User> (no undefined)
30```
31 
32## vue-tsc Strict Templates
33 
34Enable stricter template type checking:
35 
36```bash
37# Check templates with strict mode
38vue-tsc --noEmit --strict-templates
39```
40 
41Catches template errors like:
42 
43- Accessing non-existent properties
44- Wrong prop types
45- Missing required props
46 
47## tsconfig Settings
48 
49**Required for Vue 3:**
50 
51```json
52{
53  "compilerOptions": {
54    "moduleResolution": "bundler",
55    "verbatimModuleSyntax": true,
56    "strict": true,
57    "jsx": "preserve"
58  }
59}
60```
61 
62**`moduleResolution: "bundler"`** - Matches Vite/webpack resolution. Avoids `.js` extension issues.
63 
64**`verbatimModuleSyntax: true`** - Enforces explicit `type` imports:
65 
66```ts
67// ❌ May cause issues with bundlers
68import { User } from './types'
69 
70// ✅ Explicit type import
71import type { User } from './types'
72```
73 
74## Component Type Helpers
75 
76**Extract props type from component:**
77 
78```ts
79import type { ComponentProps, ComponentSlots, ComponentEmits } from 'vue-component-type-helpers'
80import MyComponent from './MyComponent.vue'
81 
82type Props = ComponentProps<typeof MyComponent>
83type Slots = ComponentSlots<typeof MyComponent>
84type Emits = ComponentEmits<typeof MyComponent>
85```
86 
87**Extract exposed methods:**
88 
89```ts
90import type { ComponentExposed } from 'vue-component-type-helpers'
91 
92type Exposed = ComponentExposed<typeof MyComponent>
93```
94 
95## Generic Components
96 
97Define generic components with typed slots:
98 
99```vue
100<script setup lang="ts" generic="T extends { id: string }">
101defineProps<{
102  items: T[]
103}>()
104 
105defineSlots<{
106  default: (props: { item: T }) => any
107}>()
108</script>
109 
110<template>
111  <div v-for="item in items" :key="item.id">
112    <slot :item="item" />
113  </div>
114</template>
115```
116 
117## Ref Type Narrowing
118 
119Handle ref type narrowing correctly:
120 
121```ts
122const maybeUser = ref<User | null>(null)
123 
124// ❌ TypeScript still sees User | null
125if (maybeUser.value) {
126  maybeUser.value.name // Error: possibly null
127}
128 
129// ✅ Use computed or extract value
130const userName = computed(() => maybeUser.value?.name ?? 'Guest')
131 
132// ✅ Or guard in same expression
133maybeUser.value && maybeUser.value.name
134```
135 
136## Event Handler Types
137 
138Type event handlers correctly:
139 
140```ts
141// DOM events
142const onClick = (e: MouseEvent) => { ... }
143const onInput = (e: Event) => {
144  const target = e.target as HTMLInputElement
145  console.log(target.value)
146}
147 
148// Component emits
149const onUpdate = (value: string) => { ... }
150```
151 
152## Common Mistakes
153 
154**Forgetting to import types explicitly:**
155 
156```ts
157// ❌ Runtime import of type-only
158import { User } from './types'
159 
160// ✅ Type-only import
161import type { User } from './types'
162```
163 
164**Not using `as const` for literal types:**
165 
166```ts
167// ❌ Type is string[]
168const variants = ['primary', 'secondary']
169 
170// ✅ Type is readonly ['primary', 'secondary']
171const variants = ['primary', 'secondary'] as const
172```
173