CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--composition-api

Provides Vue 3 Composition API compatibility for Vue 2 applications with reactive state management and lifecycle hooks.

Pending
Overview
Eval results
Files

types.mddocs/

Types and Interfaces

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

Core Reactive Types

Ref Types

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;
};

Unwrapping Types

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>;

Readonly Types

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>;

Base Types

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 }
    : {});

Component Types

Component Definition Types

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;

Props Types

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>;

Emits Types

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>;

Setup Context Types

Context and Slots

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[];

Injection Types

interface InjectionKey<T> extends Symbol {}

type InjectionConstraint = string | number | boolean | object | symbol;

Watch Types

Watch Sources and Callbacks

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)[];

Watch Options

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;
}

Computed Types

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;
}

Directive Types

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>;

Effect Scope Types

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>;
};

VNode and Render Types

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 };

Utility Types

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

docs

advanced-features.md

component-utilities.md

computed.md

dependency-injection.md

index.md

lifecycle.md

reactive-state.md

types.md

watchers.md

tile.json