types: improve (#1946)

vueuse · Jul 17, 2022 · b1996c0 · b1996c0
1 parent a524b37
commit b1996c0
Show file tree

Hide file tree

Showing 18 changed files with 86 additions and 13 deletions.
diff --git a/packages/core/useBluetooth/index.ts b/packages/core/useBluetooth/index.ts
@@ -1,3 +1,4 @@
+import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref, watch } from 'vue-demi'
 import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableNavigator } from '../_configurable'
@@ -41,7 +42,7 @@ export interface UseBluetoothOptions extends UseBluetoothRequestDeviceOptions, C
   acceptAllDevices?: boolean
 }
 
-export function useBluetooth(options?: UseBluetoothOptions) {
+export function useBluetooth(options?: UseBluetoothOptions): UseBluetoothReturn {
   let {
     acceptAllDevices = false,
   } = options || {}
@@ -132,3 +133,12 @@ export function useBluetooth(options?: UseBluetoothOptions) {
     error,
   }
 }
+
+export interface UseBluetoothReturn {
+  isSupported: Ref<boolean>
+  isConnected: ComputedRef<boolean>
+  device: Ref<BluetoothDevice | undefined>
+  requestDevice: () => Promise<void>
+  server: Ref<BluetoothRemoteGATTServer | undefined>
+  error: Ref<unknown | null>
+}
diff --git a/packages/core/useBroadcastChannel/index.ts b/packages/core/useBroadcastChannel/index.ts
@@ -1,3 +1,4 @@
+import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
 import { tryOnMounted, tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
@@ -19,7 +20,7 @@ export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  * @param options
  *
  */
-export const useBroadcastChannel = (options: UseBroadcastChannelOptions) => {
+export const useBroadcastChannel = <D, P>(options: UseBroadcastChannelOptions): UseBroadcastChannelReturn<D, P> => {
   const {
     name,
     window = defaultWindow,
@@ -77,4 +78,12 @@ export const useBroadcastChannel = (options: UseBroadcastChannelOptions) => {
   }
 }
 
-export type UseBroadcastChannelReturn = ReturnType<typeof useBroadcastChannel>
+export interface UseBroadcastChannelReturn<D, P> {
+  isSupported: Ref<boolean>
+  channel: Ref<BroadcastChannel | undefined>
+  data: Ref<D>
+  post: (data: P) => void
+  close: () => void
+  error: Ref<Event | null>
+  isClosed: Ref<boolean>
+}
diff --git a/packages/core/useCycleList/index.ts b/packages/core/useCycleList/index.ts
@@ -24,7 +24,7 @@ export interface UseCycleListOptions<T> {
  *
  * @see https://vueuse.org/useCycleList
  */
-export function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>) {
+export function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>): UseCycleListReturn<T> {
   const state = shallowRef(options?.initialValue ?? list[0]) as Ref<T>
 
   const index = computed<number>({
@@ -70,3 +70,10 @@ export function useCycleList<T>(list: T[], options?: UseCycleListOptions<T>) {
     prev,
   }
 }
+
+export interface UseCycleListReturn<T> {
+  state: Ref<T>
+  index: Ref<number>
+  next: (n?: number) => T
+  prev: (n?: number) => T
+}
diff --git a/packages/core/useDocumentVisibility/index.ts b/packages/core/useDocumentVisibility/index.ts
@@ -10,7 +10,7 @@ import { defaultDocument } from '../_configurable'
  * @see https://vueuse.org/useDocumentVisibility
  * @param options
  */
-export function useDocumentVisibility({ document = defaultDocument }: ConfigurableDocument = {}): Ref<Document['visibilityState']> {
+export function useDocumentVisibility({ document = defaultDocument }: ConfigurableDocument = {}): Ref<DocumentVisibilityState> {
   if (!document)
     return ref('visible')
 

diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts
@@ -139,3 +139,5 @@ export function useDraggable(target: MaybeComputedRef<HTMLElement | SVGElement |
     style: computed(() => `left:${position.value.x}px;top:${position.value.y}px;`),
   }
 }
+
+export type UseDraggableReturn = ReturnType<typeof useDraggable>
diff --git a/packages/core/useEyeDropper/index.ts b/packages/core/useEyeDropper/index.ts
@@ -46,3 +46,5 @@ export function useEyeDropper(options: UseEyeDropperOptions = {}) {
 
   return { isSupported, sRGBHex, open }
 }
+
+export type UseEyeDropperReturn = ReturnType<typeof useEyeDropper>
diff --git a/packages/core/useGamepad/index.ts b/packages/core/useGamepad/index.ts
@@ -149,3 +149,5 @@ export function useGamepad(options: UseGamepadOptions = {}) {
     isActive,
   }
 }
+
+export type UseGamepadReturn = ReturnType<typeof useGamepad>
diff --git a/packages/core/useImage/index.ts b/packages/core/useImage/index.ts
@@ -57,3 +57,5 @@ export const useImage = <Shallow extends true>(
 
   return state
 }
+
+export type UseImageReturn = ReturnType<typeof useImage>
diff --git a/packages/core/useMemory/index.ts b/packages/core/useMemory/index.ts
@@ -52,3 +52,5 @@ export function useMemory(options: UseMemoryOptions = {}) {
 
   return { isSupported, memory }
 }
+
+export type UseMemoryReturn = ReturnType<typeof useMemory>
diff --git a/packages/core/useNetwork/index.ts b/packages/core/useNetwork/index.ts
@@ -122,3 +122,5 @@ export function useNetwork(options: ConfigurableWindow = {}): Readonly<NetworkSt
     type,
   }
 }
+
+export type UseNetworkReturn = ReturnType<typeof useNetwork>
diff --git a/packages/core/usePointer/index.ts b/packages/core/usePointer/index.ts
@@ -85,3 +85,5 @@ export function usePointer(options: UsePointerOptions = {}) {
     isInside,
   }
 }
+
+export type UsePointerReturn = ReturnType<typeof usePointer>
diff --git a/packages/core/useTextareaAutosize/index.ts b/packages/core/useTextareaAutosize/index.ts
@@ -38,3 +38,5 @@ export function useTextareaAutosize(options?: UseTextareaAutosizeOptions) {
     triggerResize,
   }
 }
+
+export type UseTextareaAutosizeReturn = ReturnType<typeof useTextareaAutosize>
diff --git a/packages/core/useThrottledRefHistory/index.ts b/packages/core/useThrottledRefHistory/index.ts
@@ -4,6 +4,10 @@ import type { Ref } from 'vue-demi'
 import type { UseRefHistoryOptions, UseRefHistoryReturn } from '../useRefHistory'
 import { useRefHistory } from '../useRefHistory'
 
+export type UseThrottledRefHistoryOptions<Raw, Serialized = Raw> = Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & { throttle?: MaybeRef<number>; trailing?: boolean }
+
+export type UseThrottledRefHistoryReturn<Raw, Serialized = Raw> = UseRefHistoryReturn<Raw, Serialized>
+
 /**
  * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with throttled filter.
  *
@@ -13,8 +17,8 @@ import { useRefHistory } from '../useRefHistory'
  */
 export function useThrottledRefHistory<Raw, Serialized = Raw>(
   source: Ref<Raw>,
-  options: Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & { throttle?: MaybeRef<number>; trailing?: boolean } = {},
-): UseRefHistoryReturn<Raw, Serialized> {
+  options: UseThrottledRefHistoryOptions<Raw, Serialized> = {},
+): UseThrottledRefHistoryReturn<Raw, Serialized> {
   const { throttle = 200, trailing = true } = options
   const filter = throttleFilter(throttle, trailing)
   const history = useRefHistory(source, { ...options, eventFilter: filter })

diff --git a/packages/core/useTimeAgo/index.ts b/packages/core/useTimeAgo/index.ts
@@ -99,14 +99,16 @@ const DEFAULT_MESSAGES: UseTimeAgoMessages = {
 
 const DEFAULT_FORMATTER = (date: Date) => date.toISOString().slice(0, 10)
 
+export type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true ? { timeAgo: ComputedRef<string> } & Pausable : ComputedRef<string>
+
 /**
  * Reactive time ago formatter.
  *
  * @see https://vueuse.org/useTimeAgo
  * @param options
  */
-export function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options?: UseTimeAgoOptions<false>): ComputedRef<string>
-export function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<true>): { timeAgo: ComputedRef<string> } & Pausable
+export function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options?: UseTimeAgoOptions<false>): UseTimeAgoReturn<false>
+export function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<true>): UseTimeAgoReturn<true>
 export function useTimeAgo(time: MaybeComputedRef<Date | number | string>, options: UseTimeAgoOptions<boolean> = {}) {
   const {
     controls: exposeControls = false,

diff --git a/packages/core/useVirtualList/index.ts b/packages/core/useVirtualList/index.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue-demi'
+import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref, shallowRef, watch } from 'vue-demi'
 import type { MaybeRef } from '@vueuse/shared'
 import { useElementSize } from '../useElementSize'
@@ -23,7 +23,24 @@ export interface UseVirtualListItem<T> {
   index: number
 }
 
-export function useVirtualList <T = any>(list: MaybeRef<T[]>, options: UseVirtualListOptions) {
+export interface UseVirtualListReturn<T> {
+  list: Ref<UseVirtualListItem<T>[]>
+  scrollTo: (index: number) => void
+  containerProps: {
+    ref: Ref<HTMLElement | null>
+    onScroll: () => void
+    style: Partial<CSSStyleDeclaration>
+  }
+  wrapperProps: ComputedRef<{
+    style: {
+      width: string
+      height: string
+      marginTop: string
+    }
+  }>
+}
+
+export function useVirtualList <T = any>(list: MaybeRef<T[]>, options: UseVirtualListOptions): UseVirtualListReturn<T> {
   const containerRef: Ref = ref<HTMLElement | null>()
   const size = useElementSize(containerRef)
 

diff --git a/packages/core/useWakeLock/index.ts b/packages/core/useWakeLock/index.ts
@@ -16,13 +16,15 @@ type NavigatorWithWakeLock = Navigator & {
   wakeLock: { request: (type: WakeLockType) => Promise<WakeLockSentinel> }
 }
 
+export type UseWakeLockOptions = ConfigurableNavigator & ConfigurableDocument
+
 /**
  * Reactive Screen Wake Lock API.
  *
  * @see https://vueuse.org/useWakeLock
  * @param options
  */
-export const useWakeLock = (options: ConfigurableNavigator & ConfigurableDocument = {}) => {
+export const useWakeLock = (options: UseWakeLockOptions = {}) => {
   const {
     navigator = defaultNavigator,
     document = defaultDocument,

diff --git a/packages/core/useWebNotification/index.ts b/packages/core/useWebNotification/index.ts
@@ -177,3 +177,5 @@ export const useWebNotification = (
     onClose,
   }
 }
+
+export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>
diff --git a/packages/integrations/useNProgress/index.ts b/packages/integrations/useNProgress/index.ts
@@ -4,14 +4,16 @@ import type { MaybeComputedRef } from '@vueuse/shared'
 import { isNumber, tryOnScopeDispose } from '@vueuse/shared'
 import { computed, ref, watchEffect } from 'vue-demi'
 
+export type UseNProgressOptions = Partial<NProgressOptions>
+
 /**
  * Reactive progress bar.
  *
  * @see https://vueuse.org/useNProgress
  */
 export function useNProgress(
   currentProgress: MaybeComputedRef<number | null | undefined> = null,
-  options?: Partial<NProgressOptions>,
+  options?: UseNProgressOptions,
 ) {
   const progress = ref(currentProgress)
   const isLoading = computed({
@@ -46,3 +48,5 @@ export function useNProgress(
     },
   }
 }
+
+export type UseNProgressReturn = ReturnType<typeof useNProgress>