0
# Types and Interfaces
1

2
Core type definitions used throughout the Vue Composition API. These types provide comprehensive TypeScript support for all composition API features.
3

4
## Core Reactive Types
5

6
### Ref Types
7

8
```typescript { .api }
9
interface Ref<T = any> {
10
  value: T;
11
}
12

13
interface ComputedRef<T = any> extends WritableComputedRef<T> {
14
  readonly value: T;
15
}
16

17
interface WritableComputedRef<T> extends Ref<T> {
18
  readonly effect: ReactiveEffect<T>;
19
}
20

21
type ShallowRef<T> = Ref<T>;
22

23
type ToRefs<T = any> = { [K in keyof T]: Ref<T[K]> };
24

25
type CustomRefFactory<T> = (
26
  track: () => void,
27
  trigger: () => void
28
) => {
29
  get: () => T;
30
  set: (value: T) => void;
31
};
32
```
33

34
### Unwrapping Types
35

36
```typescript { .api }
37
type UnwrapRef<T> = T extends Ref<infer V>
38
  ? UnwrapRefSimple<V>
39
  : UnwrapRefSimple<T>;
40

41
type UnwrapRefSimple<T> = T extends
42
  | Function
43
  | CollectionTypes
44
  | BaseTypes
45
  | Ref
46
  | RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
47
  ? T
48
  : T extends Array<any>
49
  ? { [K in keyof T]: UnwrapRefSimple<T[K]> }
50
  : T extends object
51
  ? UnwrappedObject<T>
52
  : T;
53

54
type ShallowUnwrapRef<T> = {
55
  [K in keyof T]: T[K] extends Ref<infer V> 
56
    ? V 
57
    : T[K] extends Ref<infer V> | undefined
58
    ? unknown extends V
59
      ? undefined
60
      : V | undefined
61
    : T[K];
62
};
63

64
type UnwrappedObject<T> = { 
65
  [P in keyof T]: UnwrapRef<T[P]> 
66
} & SymbolExtract<T>;
67
```
68

69
### Readonly Types
70

71
```typescript { .api }
72
type DeepReadonly<T> = T extends Primitive
73
  ? T
74
  : T extends Function
75
  ? T
76
  : T extends Array<infer U>
77
  ? DeepReadonlyArray<U>
78
  : DeepReadonlyObject<T>;
79

80
interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}
81

82
type DeepReadonlyObject<T> = {
83
  readonly [P in keyof T]: DeepReadonly<T[P]>;
84
};
85

86
type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;
87
```
88

89
### Base Types
90

91
```typescript { .api }
92
type Primitive = string | number | boolean | bigint | symbol | undefined | null;
93

94
type BaseTypes = string | number | boolean;
95

96
type CollectionTypes = IterableCollections | WeakCollections;
97

98
type IterableCollections = Map<any, any> | Set<any>;
99

100
type WeakCollections = WeakMap<any, any> | WeakSet<any>;
101

102
interface RefUnwrapBailTypes {
103
  runtimeCoreBailTypes: Ref;
104
  runtimeDomBailTypes: Node | Window;
105
}
106

107
type SymbolExtract<T> = (T extends { [Symbol.asyncIterator]: infer V }
108
  ? { [Symbol.asyncIterator]: V }
109
  : {}) &
110
  (T extends { [Symbol.hasInstance]: infer V }
111
    ? { [Symbol.hasInstance]: V }
112
    : {}) &
113
  (T extends { [Symbol.isConcatSpreadable]: infer V }
114
    ? { [Symbol.isConcatSpreadable]: V }
115
    : {}) &
116
  (T extends { [Symbol.iterator]: infer V }
117
    ? { [Symbol.iterator]: V }
118
    : {}) &
119
  (T extends { [Symbol.match]: infer V }
120
    ? { [Symbol.match]: V }
121
    : {}) &
122
  (T extends { [Symbol.matchAll]: infer V }
123
    ? { [Symbol.matchAll]: V }
124
    : {}) &
125
  (T extends { [Symbol.replace]: infer V }
126
    ? { [Symbol.replace]: V }
127
    : {}) &
128
  (T extends { [Symbol.search]: infer V }
129
    ? { [Symbol.search]: V }
130
    : {}) &
131
  (T extends { [Symbol.species]: infer V }
132
    ? { [Symbol.species]: V }
133
    : {}) &
134
  (T extends { [Symbol.split]: infer V }
135
    ? { [Symbol.split]: V }
136
    : {}) &
137
  (T extends { [Symbol.toPrimitive]: infer V }
138
    ? { [Symbol.toPrimitive]: V }
139
    : {}) &
140
  (T extends { [Symbol.toStringTag]: infer V }
141
    ? { [Symbol.toStringTag]: V }
142
    : {}) &
143
  (T extends { [Symbol.unscopables]: infer V }
144
    ? { [Symbol.unscopables]: V }
145
    : {});
146
```
147

148
## Component Types
149

150
### Component Definition Types
151

152
```typescript { .api }
153
type Data = Record<string, unknown>;
154

155
interface ComponentInternalInstance {
156
  proxy: ComponentInstance | null;
157
  setupState: Record<string, any>;
158
  ctx: Record<string, any>;
159
  scope: EffectScope;
160
  uid: number;
161
  parent: ComponentInternalInstance | null;
162
  root: ComponentInternalInstance;
163
}
164

165
interface ComponentInstance {
166
  $data: Record<string, any>;
167
  $props: Record<string, any>;
168
  $attrs: Record<string, any>;
169
  $refs: Record<string, any>;
170
  $slots: Record<string, Function>;
171
  $root: ComponentInstance;
172
  $parent: ComponentInstance | null;
173
  $children: ComponentInstance[];
174
  $options: ComponentOptions<Vue>;
175
  $el: Element;
176
  $mount: (el?: Element | string) => ComponentInstance;
177
  $forceUpdate: () => void;
178
  $nextTick: (fn?: () => void) => Promise<void>;
179
  $destroy: () => void;
180
}
181

182
interface ComponentPublicInstance {}
183

184
interface ComponentRenderProxy {
185
  [key: string]: any;
186
}
187

188
type SetupFunction<Props, RawBindings> = (
189
  props: Readonly<Props>,
190
  ctx: SetupContext
191
) => RawBindings | (() => VNode | null) | void;
192
```
193

194
### Props Types
195

196
```typescript { .api }
197
interface PropOptions<T = any> {
198
  type?: PropType<T> | true | null;
199
  required?: boolean;
200
  default?: T | null | undefined | (() => T | null | undefined);
201
  validator?(value: T): boolean;
202
}
203

204
type PropType<T> = { new (...args: any[]): T & object } | { (): T } | PropType<T>[];
205

206
type ExtractPropTypes<O> = O extends object
207
  ? { [K in keyof O]?: O[K] extends PropOptions<infer T> ? T : any }
208
  : {};
209

210
type ExtractDefaultPropTypes<O> = O extends object
211
  ? { [K in keyof O]: O[K] extends { default: infer D } ? D : never }
212
  : {};
213

214
type ComponentPropsOptions<P = Data> = ComponentObjectPropsOptions<P> | string[];
215

216
type ComponentObjectPropsOptions<P = Data> = {
217
  [K in keyof P]: Prop<P[K]> | null;
218
};
219

220
type Prop<T> = PropOptions<T> | PropType<T>;
221
```
222

223
### Emits Types
224

225
```typescript { .api }
226
type EmitsOptions = ObjectEmitsOptions | string[];
227

228
type ObjectEmitsOptions = Record<
229
  string,
230
  ((...args: any[]) => any) | null
231
>;
232

233
type EmitFn<
234
  Options = ObjectEmitsOptions,
235
  Event extends keyof Options = keyof Options
236
> = Options extends Array<infer V>
237
  ? (event: V, ...args: any[]) => void
238
  : {} extends Options
239
  ? (event: string, ...args: any[]) => void
240
  : Options extends ObjectEmitsOptions
241
  ? {
242
      [K in Event]: Options[K] extends (...args: infer Args) => any
243
        ? (event: K, ...args: Args) => void
244
        : (event: K, ...args: any[]) => void;
245
    }[Event]
246
  : never;
247

248
type ComponentRenderEmitFn<E extends EmitsOptions = {}> = EmitFn<E>;
249
```
250

251
## Setup Context Types
252

253
### Context and Slots
254

255
```typescript { .api }
256
interface SetupContext<E extends EmitsOptions = {}> {
257
  attrs: Record<string, any>;
258
  slots: Slots;
259
  emit: EmitFn<E>;
260
}
261

262
type Slots = Readonly<InternalSlots>;
263

264
interface InternalSlots {
265
  [name: string]: Slot | undefined;
266
}
267

268
type Slot = (...args: any[]) => VNode[];
269
```
270

271
### Injection Types
272

273
```typescript { .api }
274
interface InjectionKey<T> extends Symbol {}
275

276
type InjectionConstraint = string | number | boolean | object | symbol;
277
```
278

279
## Watch Types
280

281
### Watch Sources and Callbacks
282

283
```typescript { .api }
284
type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
285

286
type WatchCallback<V = any, OV = any> = (
287
  value: V,
288
  oldValue: OV,
289
  onInvalidate: InvalidateCbRegistrator
290
) => any;
291

292
type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void;
293

294
type InvalidateCbRegistrator = (fn: () => void) => void;
295

296
type WatchStopHandle = () => void;
297

298
type MapSources<T, Immediate> = {
299
  [K in keyof T]: T[K] extends WatchSource<infer V>
300
    ? Immediate extends true
301
      ? V | undefined
302
      : V
303
    : never;
304
};
305

306
type MultiWatchSources = (WatchSource<unknown> | object)[];
307
```
308

309
### Watch Options
310

311
```typescript { .api }
312
interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
313
  immediate?: Immediate;
314
  deep?: boolean;
315
}
316

317
interface WatchOptionsBase {
318
  flush?: FlushMode;
319
}
320

321
type FlushMode = "pre" | "post" | "sync";
322

323
interface VueWatcher {
324
  lazy: boolean;
325
  get(): any;
326
  teardown(): void;
327
  update(): void;
328
  run(): void;
329
  evaluate(): void;
330
  depend(): void;
331
}
332
```
333

334
## Computed Types
335

336
```typescript { .api }
337
type ComputedGetter<T> = () => T;
338

339
type ComputedSetter<T> = (value: T) => void;
340

341
interface WritableComputedOptions<T> {
342
  get: ComputedGetter<T>;
343
  set: ComputedSetter<T>;
344
}
345

346
interface ReactiveEffect<T = any> {
347
  (): T;
348
  _isEffect: true;
349
  id: number;
350
  active: boolean;
351
  raw: () => T;
352
  deps: Array<Dep>;
353
  options: ReactiveEffectOptions;
354
  allowRecurse?: boolean;
355
}
356

357
interface ReactiveEffectOptions {
358
  lazy?: boolean;
359
  scheduler?: (job: ReactiveEffect) => void;
360
  onTrack?: (event: DebuggerEvent) => void;
361
  onTrigger?: (event: DebuggerEvent) => void;
362
  onStop?: () => void;
363
  allowRecurse?: boolean;
364
}
365
```
366

367
## Directive Types
368

369
```typescript { .api }
370
interface DirectiveBinding<V = any> {
371
  instance: ComponentPublicInstance | null;
372
  value: V;
373
  oldValue: V | null;
374
  arg?: string;
375
  modifiers: DirectiveModifiers;
376
  dir: ObjectDirective<any, V>;
377
}
378

379
interface DirectiveModifiers {
380
  [key: string]: boolean;
381
}
382

383
type DirectiveHook<T = any, Prev = VNode | null, V = any> = (
384
  el: T,
385
  binding: DirectiveBinding<V>,
386
  vnode: VNode,
387
  prevVNode: Prev
388
) => void;
389

390
interface ObjectDirective<T = any, V = any> {
391
  bind?: DirectiveHook<T, any, V>;
392
  inserted?: DirectiveHook<T, any, V>;
393
  update?: DirectiveHook<T, any, V>;
394
  componentUpdated?: DirectiveHook<T, any, V>;
395
  unbind?: DirectiveHook<T, any, V>;
396
}
397

398
type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>;
399

400
type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>;
401
```
402

403
## Effect Scope Types
404

405
```typescript { .api }
406
interface EffectScope {
407
  active: boolean;
408
  effects: ReactiveEffect[];
409
  cleanups: (() => void)[];
410
  parent: EffectScope | undefined;
411
  
412
  run<T>(fn: () => T): T | undefined;
413
  stop(): void;
414
}
415

416
type Dep = Set<ReactiveEffect> & {
417
  cleanup: () => void;
418
  computed?: ComputedRef<any>;
419
};
420
```
421

422
## VNode and Render Types
423

424
```typescript { .api }
425
interface VNode {
426
  tag?: string;
427
  data?: VNodeData;
428
  children?: VNodeChildren;
429
  text?: string;
430
  elm?: Node;
431
  ns?: string;
432
  context?: ComponentInstance;
433
  key?: string | number;
434
  componentOptions?: VNodeComponentOptions;
435
  componentInstance?: ComponentInstance;
436
  parent?: VNode;
437
  raw?: boolean;
438
  isStatic?: boolean;
439
  isRootInsert?: boolean;
440
  isComment?: boolean;
441
  isCloned?: boolean;
442
  isOnce?: boolean;
443
  asyncFactory?: Function;
444
  asyncMeta?: object;
445
  isAsyncPlaceholder?: boolean;
446
  ssrContext?: object;
447
  functionalContext?: ComponentInstance;
448
  functionalOptions?: ComponentOptions<Vue>;
449
  devtoolsMeta?: object;
450
}
451

452
interface VNodeData {
453
  key?: string | number;
454
  slot?: string;
455
  scopedSlots?: { [key: string]: Function | undefined };
456
  ref?: string | Ref | ((el: any) => void);
457
  refInFor?: boolean;
458
  tag?: string;
459
  staticClass?: string;
460
  class?: any;
461
  staticStyle?: { [key: string]: any };
462
  style?: object[] | object;
463
  props?: { [key: string]: any };
464
  attrs?: { [key: string]: any };
465
  domProps?: { [key: string]: any };
466
  hook?: { [key: string]: Function };
467
  on?: { [key: string]: Function | Function[] };
468
  nativeOn?: { [key: string]: Function | Function[] };
469
  transition?: object;
470
  show?: boolean;
471
  inlineComponent?: object;
472
  directives?: VNodeDirective[];
473
  keepAlive?: boolean;
474
}
475

476
type VNodeChildren = VNodeChildrenArrayContents | [ScopedSlot] | string;
477

478
interface VNodeChildrenArrayContents {
479
  [x: number]: VNode | string | VNodeChildren;
480
}
481

482
type ScopedSlot = (props: any) => VNodeChildren;
483

484
interface VNodeComponentOptions {
485
  Ctor: typeof Vue;
486
  propsData?: object;
487
  listeners?: object;
488
  children?: VNodeChildren;
489
  tag?: string;
490
}
491

492
interface VNodeDirective {
493
  name: string;
494
  value?: any;
495
  oldValue?: any;
496
  expression?: any;
497
  arg?: string;
498
  oldArg?: string;
499
  modifiers?: AnyObject;
500
}
501

502
type AnyObject = { [key: string]: any };
503
```
504

505
## Utility Types
506

507
```typescript { .api }
508
type LooseRequired<T> = { [P in string & keyof T]: T[P] };
509

510
type Merge<A, B> = {
511
  [K in keyof A]: K extends keyof B ? B[K] : A[K];
512
} & B;
513

514
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
515
  k: infer I
516
) => void
517
  ? I
518
  : never;
519

520
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
521

522
type IsAny<T> = 0 extends 1 & T ? true : false;
523

524
type Prettify<T> = {
525
  [K in keyof T]: T[K];
526
} & {};
527
```