feat(vue-hooks): add type annotations to multiple files to enhance type safety (#3302)

Author: zzcr

packages/vue-hooks/src/useRect.ts

@@ -1,5 +1,5 @@
-const isWindow = (val) => val === window
-const makeDOMRect = (width, height) => ({
+const isWindow = (val: any) => val === window
+const makeDOMRect = (width: number, height: number) => ({
   top: 0,
   left: 0,
   width,
@@ -8,7 +8,7 @@ const makeDOMRect = (width, height) => ({
   bottom: height
 })
 
-export const useRect = (unref) => (elOrRef) => {
+export const useRect = (unref: any) => (elOrRef: any) => {
   const el = unref(elOrRef)
 
   if (isWindow(el)) {

packages/vue-hooks/src/useTouch.ts

@@ -1,14 +1,14 @@
 const TAP_OFFSET = 5
 
-const getDirection = (x, y) => {
+const getDirection = (x: number, y: number) => {
   if (x > y) return 'horizontal'
   if (y > x) return 'vertical'
   return ''
 }
 
-const touchEvent = (event) => event.touches[0]
+const touchEvent = (event: TouchEvent) => event.touches[0]
 
-export const useTouch = (ref) => () => {
+export const useTouch = (ref: any) => () => {
   const startX = ref(0)
   const startY = ref(0)
   const deltaX = ref(0)
@@ -30,14 +30,14 @@ export const useTouch = (ref) => () => {
     isTap.value = true
   }
 
-  const start = (event) => {
+  const start = (event: TouchEvent) => {
     reset()
     const touch = touchEvent(event)
     startX.value = touch.clientX
     startY.value = touch.clientY
   }
 
-  const move = (event) => {
+  const move = (event: TouchEvent) => {
     const touch = touchEvent(event)
     // safari back will set clientX to negative number
     deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value

packages/vue-hooks/src/vue-emitter.ts

@@ -12,9 +12,9 @@
  */
 
 //  全局未引用 ，待移除
-export default (vm) => {
-  const broadcast = (vm, componentName, eventName, params) => {
-    vm.$children.forEach((child) => {
+export default (vm: any) => {
+  const broadcast = (vm: any, componentName: string, eventName: string, params: any) => {
+    vm.$children.forEach((child: any) => {
       const name = child.$options.componentName
 
       if (name === componentName) {
@@ -26,7 +26,7 @@ export default (vm) => {
   }
 
   return {
-    dispatch(componentName, eventName, params) {
+    dispatch(componentName: string, eventName: string, params: any) {
       let parent = vm.$parent || vm.$root
       let name = parent.$options.componentName
 
@@ -42,7 +42,7 @@ export default (vm) => {
         parent.$emit.apply(parent, [eventName].concat(params))
       }
     },
-    broadcast(componentName, eventName, params) {
+    broadcast(componentName: string, eventName: string, params: any) {
       broadcast(vm, componentName, eventName, params)
     }
   }

packages/vue-hooks/src/vue-popper.ts

@@ -11,14 +11,11 @@
  */
 
 import { PopupManager, PopperJS, on, off, isDisplayNone } from '@opentiny/utils'
-
-// todo
-import type { ISharedRenderlessFunctionParams } from 'types/shared.type'
-
+import type { ISharedRenderlessFunctionParams } from '../types/shared.type'
 import { isServer } from '@opentiny/utils'
 
 export interface IPopperState {
-  popperJS: Popper
+  popperJS: PopperJS | null
   appended: boolean
   popperElm: HTMLElement
   showPopper: boolean
@@ -48,10 +45,10 @@ const getReference = ({ state, props, vm, slots }: Pick<IPopperInputParams, 'sta
   return reference
 }
 
-const getReferMaxZIndex = (reference) => {
+const getReferMaxZIndex = (reference: HTMLElement) => {
   if (!reference || !reference.nodeType) return
 
-  let getZIndex = (dom) => parseInt(window.getComputedStyle(dom).zIndex, 10) || 0
+  let getZIndex = (dom: HTMLElement) => parseInt(window.getComputedStyle(dom).zIndex, 10) || 0
   let max = getZIndex(reference)
   let z
 
@@ -90,14 +87,14 @@ export const userPopper = (options: IPopperInputParams) => {
     toRefs,
     popperVmRef
   } = options
-  const state = reactive<IPopperState>({
+  const state = reactive({
     popperJS: null as any,
     appended: false, // arrow 是否添加
     popperElm: null as any,
     showPopper: props.manual ? Boolean(props.modelValue) : false,
     referenceElm: null as any,
     currentPlacement: ''
-  })
+  }) as IPopperState
 
   /** 创建箭头函数 */
   const appendArrow = (el: HTMLElement) => {
@@ -123,11 +120,11 @@ export const userPopper = (options: IPopperInputParams) => {
     }
   }
 
-  const nextZIndex = (reference) => {
+  const nextZIndex = (reference: HTMLElement) => {
     return props.zIndex === 'relative' ? getReferMaxZIndex(reference) : PopupManager.nextZIndex()
   }
 
-  const createPopper = (dom) => {
+  const createPopper = (dom: HTMLElement) => {
     if (isServer) {
       return
     }
@@ -183,7 +180,7 @@ export const userPopper = (options: IPopperInputParams) => {
   /** 第一次 updatePopper 的时候，才真正执行创建
    * popperElmOrTrue===true的场景仅在select组件动态更新面版时，不更新zIndex
    */
-  const updatePopper = (popperElmOrTrue?: HTMLElement) => {
+  const updatePopper = (popperElmOrTrue?: HTMLElement | boolean) => {
     if (popperElmOrTrue && popperElmOrTrue !== true) {
       state.popperElm = popperElmOrTrue
     }
@@ -230,7 +227,7 @@ export const userPopper = (options: IPopperInputParams) => {
   // 注意： 一直以来，state.showPopper 为false时，并未调用doDestroy. 像popover只是依赖这个值来 给reference元素 v-show一下
   watch(
     () => state.showPopper,
-    (val) => {
+    (val: boolean) => {
       if (props.disabled) {
         return
       }

packages/vue-hooks/src/vue-popup.ts

@@ -13,7 +13,7 @@
 import { merge, PopupManager, addClass } from '@opentiny/utils'
 
 // todo
-import type { ISharedRenderlessFunctionParams } from 'types/shared.type'
+import type { ISharedRenderlessFunctionParams } from '../types/shared.type'
 import { isServer } from '@opentiny/utils'
 
 let idSeed = 1
@@ -53,7 +53,7 @@ const setWatchFn = ({
 
   watch(
     () => props.visible,
-    (val) => {
+    (val: boolean) => {
       if (val) {
         if (vm._opening) {
           return
@@ -182,10 +182,10 @@ const closeFn =
  */
 export const usePopup = (options: IPopupInputParams) => {
   const { api, nextTick, onBeforeUnmount, onMounted, props, reactive, toRefs, vm, watch } = options
-  const state = reactive<IPopupState>({
+  const state = reactive({
     opened: false,
     rendered: false
-  })
+  }) as IPopupState
 
   setWatchFn({ onMounted, onBeforeUnmount, watch, vm, api, props, state, nextTick })
 

packages/vue-hooks/types/shared.type.ts

@@ -0,0 +1,15 @@
+export interface ISharedRenderlessFunctionParams<T> {
+  vm: any
+  props: any
+  slots: any
+  emit: Function
+  parent: any
+  nextTick: Function
+  watch: Function
+  reactive: Function
+  toRefs: Function
+  onBeforeUnmount: Function
+  onMounted: Function
+  onDeactivated: Function
+  popperVmRef: any
+}