diff --git a/packages/shared/utils/types.ts b/packages/shared/utils/types.ts index c0cb0c1d679..bb6893c080c 100644 --- a/packages/shared/utils/types.ts +++ b/packages/shared/utils/types.ts @@ -125,6 +125,8 @@ export interface ConfigurableFlushSync { } // Internal Types +export type MultiWatchSources = (WatchSource | object)[] + export type MapSources = { [K in keyof T]: T[K] extends WatchSource ? V : never; } diff --git a/packages/shared/watchDeep/index.ts b/packages/shared/watchDeep/index.ts index 32545a94919..28151f4ec8c 100644 --- a/packages/shared/watchDeep/index.ts +++ b/packages/shared/watchDeep/index.ts @@ -1,14 +1,41 @@ -import type { WatchCallback, WatchOptions, WatchSource } from 'vue-demi' +import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue-demi' import { watch } from 'vue-demi' +import type { MapOldSources, MapSources, MultiWatchSources } from '../utils/types' + +// overloads +export function watchDeep< + T extends Readonly, + Immediate extends Readonly = false, +>( + source: T, + cb: WatchCallback, MapOldSources>, + options?: Omit, 'deep'> +): WatchStopHandle + +export function watchDeep = false>( + source: WatchSource, + cb: WatchCallback, + options?: Omit, 'deep'> +): WatchStopHandle + +export function watchDeep< + T extends object, + Immediate extends Readonly = false, +>( + source: T, + cb: WatchCallback, + options?: Omit, 'deep'> +): WatchStopHandle + /** * Shorthand for watching value with {deep: true} * * @see https://vueuse.org/watchDeep */ -export function watchDeep(source: WatchSource, cb: WatchCallback, options?: Omit) { +export function watchDeep = false>(source: T | WatchSource, cb: any, options?: Omit, 'deep'>) { return watch( - source, + source as any, cb, { ...options, diff --git a/packages/shared/watchImmediate/index.ts b/packages/shared/watchImmediate/index.ts index 5a28419ed3c..71fbdba59b0 100644 --- a/packages/shared/watchImmediate/index.ts +++ b/packages/shared/watchImmediate/index.ts @@ -1,14 +1,35 @@ -import type { WatchCallback, WatchOptions, WatchSource } from 'vue-demi' +import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue-demi' import { watch } from 'vue-demi' +import type { MapOldSources, MapSources, MultiWatchSources } from '../utils/types' + +// overloads +export function watchImmediate>( + source: T, + cb: WatchCallback, MapOldSources>, + options?: Omit, 'deep'> +): WatchStopHandle + +export function watchImmediate( + source: WatchSource, + cb: WatchCallback, + options?: Omit, 'deep'> +): WatchStopHandle + +export function watchImmediate( + source: T, + cb: WatchCallback, + options?: Omit, 'deep'> +): WatchStopHandle + /** * Shorthand for watching value with {immediate: true} * * @see https://vueuse.org/watchImmediate */ -export function watchImmediate(source: WatchSource, cb: WatchCallback, options?: Omit) { +export function watchImmediate(source: T, cb: any, options?: Omit) { return watch( - source, + source as any, cb, { ...options,