chore: add explicit type annoation (#19352)

* chore: add explicit type annoation

* chore: update

* chore: update

packages/components/select-v2/src/useSelect.ts

@@ -49,10 +49,95 @@ import type { ISelectV2Props } from './token'
 import type { SelectEmitFn } from './defaults'
 import type { TooltipInstance } from '@element-plus/components/tooltip'
 import type { SelectDropdownInstance } from './select-dropdown'
+import type { Component, ComputedRef, Ref, WritableComputedRef } from 'vue'
 
 const MINIMUM_INPUT_WIDTH = 11
 
-const useSelect = (props: ISelectV2Props, emit: SelectEmitFn) => {
+type useSelectReturnType = (
+  props: ISelectV2Props,
+  emit: SelectEmitFn
+) => {
+  inputId: Ref<string | undefined>
+  collapseTagSize: ComputedRef<'default' | 'small'>
+  currentPlaceholder: ComputedRef<string>
+  expanded: Ref<boolean>
+  emptyText: ComputedRef<string | false | null>
+  popupHeight: ComputedRef<number>
+  debounce: ComputedRef<0 | 300>
+  allOptions: Ref<OptionType[]>
+  filteredOptions: Ref<OptionType[]>
+  iconComponent: ComputedRef<any>
+  iconReverse: ComputedRef<any>
+  tagStyle: ComputedRef<{ maxWidth: string }>
+  collapseTagStyle: ComputedRef<{ maxWidth: string }>
+  inputStyle: ComputedRef<{ width: string }>
+  popperSize: Ref<number>
+  dropdownMenuVisible: WritableComputedRef<boolean>
+  hasModelValue: ComputedRef<boolean>
+  shouldShowPlaceholder: ComputedRef<boolean>
+  selectDisabled: ComputedRef<boolean | undefined>
+  selectSize: ComputedRef<string>
+  needStatusIcon: ComputedRef<boolean>
+  showClearBtn: ComputedRef<boolean>
+  states: SelectStates
+  isFocused: Ref<boolean>
+  nsSelect: ReturnType<typeof useNamespace>
+  nsInput: ReturnType<typeof useNamespace>
+  calculatorRef: Ref<HTMLElement | undefined>
+  inputRef: Ref<HTMLElement | undefined>
+  menuRef: Ref<SelectDropdownInstance | undefined>
+  tagMenuRef: Ref<HTMLElement | undefined>
+  tooltipRef: Ref<TooltipInstance | undefined>
+  tagTooltipRef: Ref<TooltipInstance | undefined>
+  selectRef: Ref<HTMLElement | undefined>
+  wrapperRef: Ref<HTMLElement | undefined>
+  selectionRef: Ref<HTMLElement | undefined>
+  prefixRef: Ref<HTMLElement | undefined>
+  suffixRef: Ref<HTMLElement | undefined>
+  collapseItemRef: Ref<HTMLElement | undefined>
+  popperRef: ComputedRef<HTMLElement | undefined>
+  validateState: ComputedRef<string>
+  validateIcon: ComputedRef<Component | undefined>
+  showTagList: ComputedRef<Option[]>
+  collapseTagList: ComputedRef<Option[]>
+  debouncedOnInputChange: () => void
+  deleteTag: (event: MouseEvent, option: Option) => void
+  getLabel: (option: Option) => string
+  getValue: (option: Option) => unknown
+  getDisabled: (option: Option) => boolean
+  getValueKey: (item: unknown) => any
+  handleClear: () => void
+  handleClickOutside: (event: Event) => void
+  handleDel: (e: KeyboardEvent) => void
+  handleEsc: () => void
+  focus: () => void
+  blur: () => void
+  handleMenuEnter: () => void
+  handleResize: () => void
+  resetSelectionWidth: () => void
+  resetCalculatorWidth: () => void
+  updateTooltip: () => void
+  updateTagTooltip: () => void
+  updateOptions: () => void
+  toggleMenu: () => void
+  scrollTo: (index: number) => void
+  onInput: (event: Event) => void
+  onKeyboardNavigate: (
+    direction: 'forward' | 'backward',
+    hoveringIndex?: number
+  ) => void
+  onKeyboardSelect: () => void
+  onSelect: (option: Option) => void
+  onHover: (idx?: number) => void
+  handleCompositionStart: (event: CompositionEvent) => void
+  handleCompositionEnd: (event: CompositionEvent) => void
+  handleCompositionUpdate: (event: CompositionEvent) => void
+}
+
+const useSelect: useSelectReturnType = (
+  props: ISelectV2Props,
+  emit: SelectEmitFn
+) => {
   // inject
   const { t } = useLocale()
   const nsSelect = useNamespace('select')

packages/components/select/src/select.vue

@@ -375,7 +375,7 @@ export default defineComponent({
       if (!props.multiple) {
         return API.states.selectedLabel
       }
-      return API.states.selected.map((i) => i.currentLabel as string)
+      return API.states.selected.map((i: any) => i.currentLabel as string)
     })
 
     return {

packages/components/select/src/useSelect.ts

@@ -53,7 +53,88 @@ import type { ISelectProps, SelectOptionProxy } from './token'
 
 const MINIMUM_INPUT_WIDTH = 11
 
-export const useSelect = (props: ISelectProps, emit) => {
+type useSelectType = (
+  props: ISelectProps,
+  emit: any
+) => {
+  inputId: Ref<string | undefined>
+  contentId: Ref<string | undefined>
+  nsSelect: Ref<string | undefined>
+  nsInput: Ref<string | undefined>
+  states: Reactive<Record<string, any>>
+  isFocused: Ref<boolean>
+  expanded: Ref<boolean>
+  optionsArray: ComputedRef<any[]>
+  hoverOption: Ref<unknown>
+  selectSize: ComputedRef<'' | 'default' | 'small' | 'large'>
+  filteredOptionsCount: ComputedRef<number>
+  resetCalculatorWidth: () => void
+  updateTooltip: () => void
+  updateTagTooltip: () => void
+  debouncedOnInputChange: DebouncedFunc<() => void>
+  onInput: (event: Event) => void
+  deletePrevTag: (event: Event) => void
+  deleteTag: (event: Event, tag: any) => void
+  deleteSelected: (event: Event) => void
+  handleOptionSelect: (option: any) => void
+  scrollToOption: (option: any) => void
+  hasModelValue: ComputedRef<boolean>
+  shouldShowPlaceholder: ComputedRef<boolean>
+  currentPlaceholder: ComputedRef<string>
+  mouseEnterEventName: Ref<string | null>
+  needStatusIcon: ComputedRef<boolean>
+  showClose: ComputedRef<boolean>
+  iconComponent: ComputedRef<string>
+  iconReverse: ComputedRef<boolean>
+  validateState: ComputedRef<string>
+
+  validateIcon: ComputedRef<unknown>
+  showNewOption: ComputedRef<boolean>
+  updateOptions: () => void
+  collapseTagSize: ComputedRef<'default' | 'small'>
+  setSelected: () => void
+  selectDisabled: ComputedRef<boolean>
+  emptyText: ComputedRef<string | null>
+  handleCompositionStart: (e: Event) => void
+  handleCompositionUpdate: (e: Event) => void
+  handleCompositionEnd: (e: Event) => void
+  onOptionCreate: (vm: SelectOptionProxy) => void
+  onOptionDestroy: (key: any, vm: SelectOptionProxy) => void
+  handleMenuEnter: () => void
+  focus: () => void
+  blur: () => void
+  handleClearClick: (event: Event) => void
+  handleClickOutside: (event: Event) => void
+  handleEsc: () => void
+  toggleMenu: () => void
+  selectOption: () => void
+  getValueKey: (item: any) => any
+  navigateOptions: (direction: string) => void
+  dropdownMenuVisible: WritableComputedRef<boolean>
+  showTagList: ComputedRef<unknown[]>
+  collapseTagList: ComputedRef<unknown[]>
+  tagStyle: ComputedRef<unknown>
+  collapseTagStyle: ComputedRef<unknown>
+  inputStyle: ComputedRef<unknown>
+  popperRef: ComputedRef<unknown>
+  inputRef: Ref<HTMLInputElement | null>
+  tooltipRef: Ref<InstanceType<typeof ElTooltip> | null>
+  tagTooltipRef: Ref<InstanceType<typeof ElTooltip> | null>
+  calculatorRef: Ref<HTMLElement>
+  prefixRef: Ref<HTMLElement>
+  suffixRef: Ref<HTMLElement>
+  selectRef: Ref<HTMLElement>
+  wrapperRef: Ref<HTMLElement>
+  selectionRef: Ref<HTMLElement>
+  scrollbarRef: Ref<{
+    handleScroll: () => void
+  } | null>
+  menuRef: Ref<HTMLElement>
+  tagMenuRef: Ref<HTMLElement>
+  collapseItemRef: Ref<HTMLElement>
+}
+
+export const useSelect: useSelectType = (props: ISelectProps, emit) => {
   const { t } = useLocale()
   const contentId = useId()
   const nsSelect = useNamespace('select')

packages/components/slider/src/composables/use-slider-button.ts

@@ -50,7 +50,27 @@ const useTooltip = (
   }
 }
 
-export const useSliderButton = (
+type HTMLType = HTMLDivElement | undefined
+type useSliderButtonType = (
+  props: SliderButtonProps,
+  initData: SliderButtonInitData,
+  emit: SetupContext<SliderButtonEmits>['emit']
+) => {
+  disabled: Ref<boolean>
+  button: Ref<HTMLType>
+  tooltip: Ref<TooltipInstance | undefined>
+  tooltipVisible: Ref<boolean>
+  showTooltip: Ref<SliderProps['showTooltip']>
+  wrapperStyle: ComputedRef<CSSProperties>
+  formatValue: ComputedRef<number | string>
+  handleMouseEnter: () => void
+  handleMouseLeave: () => void
+  onButtonDown: (event: MouseEvent | TouchEvent) => void
+  onKeyDown: (event: KeyboardEvent) => void
+  setPosition: (newPosition: number) => Promise<void>
+}
+
+export const useSliderButton: useSliderButtonType = (
   props: SliderButtonProps,
   initData: SliderButtonInitData,
   emit: SetupContext<SliderButtonEmits>['emit']