Provides Vue 3 Composition API compatibility for Vue 2 applications with reactive state management and lifecycle hooks.
—
Core type definitions used throughout the Vue Composition API. These types provide comprehensive TypeScript support for all composition API features.
interface Ref<T = any> {
value: T;
}
interface ComputedRef<T = any> extends WritableComputedRef<T> {
readonly value: T;
}
interface WritableComputedRef<T> extends Ref<T> {
readonly effect: ReactiveEffect<T>;
}
type ShallowRef<T> = Ref<T>;
type ToRefs<T = any> = { [K in keyof T]: Ref<T[K]> };
type CustomRefFactory<T> = (
track: () => void,
trigger: () => void
) => {
get: () => T;
set: (value: T) => void;
};type UnwrapRef<T> = T extends Ref<infer V>
? UnwrapRefSimple<V>
: UnwrapRefSimple<T>;
type UnwrapRefSimple<T> = T extends
| Function
| CollectionTypes
| BaseTypes
| Ref
| RefUnwrapBailTypes[keyof RefUnwrapBailTypes]
? T
: T extends Array<any>
? { [K in keyof T]: UnwrapRefSimple<T[K]> }
: T extends object
? UnwrappedObject<T>
: T;
type ShallowUnwrapRef<T> = {
[K in keyof T]: T[K] extends Ref<infer V>
? V
: T[K] extends Ref<infer V> | undefined
? unknown extends V
? undefined
: V | undefined
: T[K];
};
type UnwrappedObject<T> = {
[P in keyof T]: UnwrapRef<T[P]>
} & SymbolExtract<T>;type DeepReadonly<T> = T extends Primitive
? T
: T extends Function
? T
: T extends Array<infer U>
? DeepReadonlyArray<U>
: DeepReadonlyObject<T>;
interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}
type DeepReadonlyObject<T> = {
readonly [P in keyof T]: DeepReadonly<T[P]>;
};
type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRefSimple<T>;type Primitive = string | number | boolean | bigint | symbol | undefined | null;
type BaseTypes = string | number | boolean;
type CollectionTypes = IterableCollections | WeakCollections;
type IterableCollections = Map<any, any> | Set<any>;
type WeakCollections = WeakMap<any, any> | WeakSet<any>;
interface RefUnwrapBailTypes {
runtimeCoreBailTypes: Ref;
runtimeDomBailTypes: Node | Window;
}
type SymbolExtract<T> = (T extends { [Symbol.asyncIterator]: infer V }
? { [Symbol.asyncIterator]: V }
: {}) &
(T extends { [Symbol.hasInstance]: infer V }
? { [Symbol.hasInstance]: V }
: {}) &
(T extends { [Symbol.isConcatSpreadable]: infer V }
? { [Symbol.isConcatSpreadable]: V }
: {}) &
(T extends { [Symbol.iterator]: infer V }
? { [Symbol.iterator]: V }
: {}) &
(T extends { [Symbol.match]: infer V }
? { [Symbol.match]: V }
: {}) &
(T extends { [Symbol.matchAll]: infer V }
? { [Symbol.matchAll]: V }
: {}) &
(T extends { [Symbol.replace]: infer V }
? { [Symbol.replace]: V }
: {}) &
(T extends { [Symbol.search]: infer V }
? { [Symbol.search]: V }
: {}) &
(T extends { [Symbol.species]: infer V }
? { [Symbol.species]: V }
: {}) &
(T extends { [Symbol.split]: infer V }
? { [Symbol.split]: V }
: {}) &
(T extends { [Symbol.toPrimitive]: infer V }
? { [Symbol.toPrimitive]: V }
: {}) &
(T extends { [Symbol.toStringTag]: infer V }
? { [Symbol.toStringTag]: V }
: {}) &
(T extends { [Symbol.unscopables]: infer V }
? { [Symbol.unscopables]: V }
: {});type Data = Record<string, unknown>;
interface ComponentInternalInstance {
proxy: ComponentInstance | null;
setupState: Record<string, any>;
ctx: Record<string, any>;
scope: EffectScope;
uid: number;
parent: ComponentInternalInstance | null;
root: ComponentInternalInstance;
}
interface ComponentInstance {
$data: Record<string, any>;
$props: Record<string, any>;
$attrs: Record<string, any>;
$refs: Record<string, any>;
$slots: Record<string, Function>;
$root: ComponentInstance;
$parent: ComponentInstance | null;
$children: ComponentInstance[];
$options: ComponentOptions<Vue>;
$el: Element;
$mount: (el?: Element | string) => ComponentInstance;
$forceUpdate: () => void;
$nextTick: (fn?: () => void) => Promise<void>;
$destroy: () => void;
}
interface ComponentPublicInstance {}
interface ComponentRenderProxy {
[key: string]: any;
}
type SetupFunction<Props, RawBindings> = (
props: Readonly<Props>,
ctx: SetupContext
) => RawBindings | (() => VNode | null) | void;interface PropOptions<T = any> {
type?: PropType<T> | true | null;
required?: boolean;
default?: T | null | undefined | (() => T | null | undefined);
validator?(value: T): boolean;
}
type PropType<T> = { new (...args: any[]): T & object } | { (): T } | PropType<T>[];
type ExtractPropTypes<O> = O extends object
? { [K in keyof O]?: O[K] extends PropOptions<infer T> ? T : any }
: {};
type ExtractDefaultPropTypes<O> = O extends object
? { [K in keyof O]: O[K] extends { default: infer D } ? D : never }
: {};
type ComponentPropsOptions<P = Data> = ComponentObjectPropsOptions<P> | string[];
type ComponentObjectPropsOptions<P = Data> = {
[K in keyof P]: Prop<P[K]> | null;
};
type Prop<T> = PropOptions<T> | PropType<T>;type EmitsOptions = ObjectEmitsOptions | string[];
type ObjectEmitsOptions = Record<
string,
((...args: any[]) => any) | null
>;
type EmitFn<
Options = ObjectEmitsOptions,
Event extends keyof Options = keyof Options
> = Options extends Array<infer V>
? (event: V, ...args: any[]) => void
: {} extends Options
? (event: string, ...args: any[]) => void
: Options extends ObjectEmitsOptions
? {
[K in Event]: Options[K] extends (...args: infer Args) => any
? (event: K, ...args: Args) => void
: (event: K, ...args: any[]) => void;
}[Event]
: never;
type ComponentRenderEmitFn<E extends EmitsOptions = {}> = EmitFn<E>;interface SetupContext<E extends EmitsOptions = {}> {
attrs: Record<string, any>;
slots: Slots;
emit: EmitFn<E>;
}
type Slots = Readonly<InternalSlots>;
interface InternalSlots {
[name: string]: Slot | undefined;
}
type Slot = (...args: any[]) => VNode[];interface InjectionKey<T> extends Symbol {}
type InjectionConstraint = string | number | boolean | object | symbol;type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
type WatchCallback<V = any, OV = any> = (
value: V,
oldValue: OV,
onInvalidate: InvalidateCbRegistrator
) => any;
type WatchEffect = (onInvalidate: InvalidateCbRegistrator) => void;
type InvalidateCbRegistrator = (fn: () => void) => void;
type WatchStopHandle = () => void;
type MapSources<T, Immediate> = {
[K in keyof T]: T[K] extends WatchSource<infer V>
? Immediate extends true
? V | undefined
: V
: never;
};
type MultiWatchSources = (WatchSource<unknown> | object)[];interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
immediate?: Immediate;
deep?: boolean;
}
interface WatchOptionsBase {
flush?: FlushMode;
}
type FlushMode = "pre" | "post" | "sync";
interface VueWatcher {
lazy: boolean;
get(): any;
teardown(): void;
update(): void;
run(): void;
evaluate(): void;
depend(): void;
}type ComputedGetter<T> = () => T;
type ComputedSetter<T> = (value: T) => void;
interface WritableComputedOptions<T> {
get: ComputedGetter<T>;
set: ComputedSetter<T>;
}
interface ReactiveEffect<T = any> {
(): T;
_isEffect: true;
id: number;
active: boolean;
raw: () => T;
deps: Array<Dep>;
options: ReactiveEffectOptions;
allowRecurse?: boolean;
}
interface ReactiveEffectOptions {
lazy?: boolean;
scheduler?: (job: ReactiveEffect) => void;
onTrack?: (event: DebuggerEvent) => void;
onTrigger?: (event: DebuggerEvent) => void;
onStop?: () => void;
allowRecurse?: boolean;
}interface DirectiveBinding<V = any> {
instance: ComponentPublicInstance | null;
value: V;
oldValue: V | null;
arg?: string;
modifiers: DirectiveModifiers;
dir: ObjectDirective<any, V>;
}
interface DirectiveModifiers {
[key: string]: boolean;
}
type DirectiveHook<T = any, Prev = VNode | null, V = any> = (
el: T,
binding: DirectiveBinding<V>,
vnode: VNode,
prevVNode: Prev
) => void;
interface ObjectDirective<T = any, V = any> {
bind?: DirectiveHook<T, any, V>;
inserted?: DirectiveHook<T, any, V>;
update?: DirectiveHook<T, any, V>;
componentUpdated?: DirectiveHook<T, any, V>;
unbind?: DirectiveHook<T, any, V>;
}
type FunctionDirective<T = any, V = any> = DirectiveHook<T, any, V>;
type Directive<T = any, V = any> = ObjectDirective<T, V> | FunctionDirective<T, V>;interface EffectScope {
active: boolean;
effects: ReactiveEffect[];
cleanups: (() => void)[];
parent: EffectScope | undefined;
run<T>(fn: () => T): T | undefined;
stop(): void;
}
type Dep = Set<ReactiveEffect> & {
cleanup: () => void;
computed?: ComputedRef<any>;
};interface VNode {
tag?: string;
data?: VNodeData;
children?: VNodeChildren;
text?: string;
elm?: Node;
ns?: string;
context?: ComponentInstance;
key?: string | number;
componentOptions?: VNodeComponentOptions;
componentInstance?: ComponentInstance;
parent?: VNode;
raw?: boolean;
isStatic?: boolean;
isRootInsert?: boolean;
isComment?: boolean;
isCloned?: boolean;
isOnce?: boolean;
asyncFactory?: Function;
asyncMeta?: object;
isAsyncPlaceholder?: boolean;
ssrContext?: object;
functionalContext?: ComponentInstance;
functionalOptions?: ComponentOptions<Vue>;
devtoolsMeta?: object;
}
interface VNodeData {
key?: string | number;
slot?: string;
scopedSlots?: { [key: string]: Function | undefined };
ref?: string | Ref | ((el: any) => void);
refInFor?: boolean;
tag?: string;
staticClass?: string;
class?: any;
staticStyle?: { [key: string]: any };
style?: object[] | object;
props?: { [key: string]: any };
attrs?: { [key: string]: any };
domProps?: { [key: string]: any };
hook?: { [key: string]: Function };
on?: { [key: string]: Function | Function[] };
nativeOn?: { [key: string]: Function | Function[] };
transition?: object;
show?: boolean;
inlineComponent?: object;
directives?: VNodeDirective[];
keepAlive?: boolean;
}
type VNodeChildren = VNodeChildrenArrayContents | [ScopedSlot] | string;
interface VNodeChildrenArrayContents {
[x: number]: VNode | string | VNodeChildren;
}
type ScopedSlot = (props: any) => VNodeChildren;
interface VNodeComponentOptions {
Ctor: typeof Vue;
propsData?: object;
listeners?: object;
children?: VNodeChildren;
tag?: string;
}
interface VNodeDirective {
name: string;
value?: any;
oldValue?: any;
expression?: any;
arg?: string;
oldArg?: string;
modifiers?: AnyObject;
}
type AnyObject = { [key: string]: any };type LooseRequired<T> = { [P in string & keyof T]: T[P] };
type Merge<A, B> = {
[K in keyof A]: K extends keyof B ? B[K] : A[K];
} & B;
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
k: infer I
) => void
? I
: never;
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
type IsAny<T> = 0 extends 1 & T ? true : false;
type Prettify<T> = {
[K in keyof T]: T[K];
} & {};Install with Tessl CLI
npx tessl i tessl/npm-vue--composition-api