feat(watch): watchImmediate and watchDeep support overloads (#2998)

vueuse · Apr 19, 2023 · 8f6a0c5 · 8f6a0c5
1 parent 659b2c9
commit 8f6a0c5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 6 deletions.
diff --git 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<unknown> | object)[]
+
 export type MapSources<T> = {
   [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
 }

diff --git 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<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: Omit<WatchOptions<Immediate>, 'deep'>
+): WatchStopHandle
+
+export function watchDeep<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: Omit<WatchOptions<Immediate>, 'deep'>
+): WatchStopHandle
+
+export function watchDeep<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: Omit<WatchOptions<Immediate>, 'deep'>
+): WatchStopHandle
+
 /**
  * Shorthand for watching value with {deep: true}
  *
  * @see https://vueuse.org/watchDeep
  */
-export function watchDeep<T>(source: WatchSource<T>, cb: WatchCallback<T>, options?: Omit<WatchOptions, 'deep'>) {
+export function watchDeep<T = any, Immediate extends Readonly<boolean> = false>(source: T | WatchSource<T>, cb: any, options?: Omit<WatchOptions<Immediate>, 'deep'>) {
   return watch(
-    source,
+    source as any,
     cb,
     {
       ...options,

diff --git 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<T extends Readonly<MultiWatchSources>>(
+  source: T,
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, true>>,
+  options?: Omit<WatchOptions<true>, 'deep'>
+): WatchStopHandle
+
+export function watchImmediate<T>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, T | undefined>,
+  options?: Omit<WatchOptions<true>, 'deep'>
+): WatchStopHandle
+
+export function watchImmediate<T extends object>(
+  source: T,
+  cb: WatchCallback<T, T | undefined>,
+  options?: Omit<WatchOptions<true>, 'deep'>
+): WatchStopHandle
+
 /**
  * Shorthand for watching value with {immediate: true}
  *
  * @see https://vueuse.org/watchImmediate
  */
-export function watchImmediate<T>(source: WatchSource<T>, cb: WatchCallback<T>, options?: Omit<WatchOptions, 'immediate'>) {
+export function watchImmediate<T = any>(source: T, cb: any, options?: Omit<WatchOptions, 'immediate'>) {
   return watch(
-    source,
+    source as any,
     cb,
     {
       ...options,