Как корректно импортировать функцию typescript(2698) vue 3?

Question

[700Hp]

Код ошибки:

TS2698: Spread types may only be created from object types.
    33 |     return {
    34 |       contact,
  > 35 |       ...useHandleClick(handleClick)
       |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    36 |     }
    37 |   }

Код функции:

import { onMounted, onBeforeUnmount } from 'vue'

interface IFunction {
  (e: Event): void
}

export function useHandleClick (fn: IFunction): void {
  onMounted(() => {
    document.addEventListener('click', fn)
  })

  onBeforeUnmount(() => {
    document.removeEventListener('click', fn)
  })
}

Код компонента:

const handleClick = (event: Event): void => {
      const target = event.target as Element
      if (target.closest('button') || target.closest('.contact')) return
      emit('close')
    }

    // noinspection JSVoidFunctionReturnValueUsed
    return {
      ...useHandleClick(handleClick)
    }

Comments

[Aetae]

Т.к. похоже вообще не понижаешь, что делаешь. Spread тут не нужен, т.к. useHandleClick ничего не возвращает.
Просто напиши useHandleClick(handleClick) до return и всё.

Answer 1

[wonderingpeanut]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Comments

[700Hp]

Я понимаю о чём гласит перевод.
Но чем функция не объект? Я так понимаю, дело в том, что она ничего не возвращает и по факту нечего забрать.

Моим решением на данный момент обозначить данный use за пределами return

const handleClick = (event: Event) => {
      const target = event.target as Element
      if (target.closest('button') || target.closest('.contact')) return
      emit('close')
    }

    useHandleClick(handleClick)
    return {
      contact
    }

[WbICHA]

Я так понимаю, дело в том, что она ничего не возвращает и по факту нечего забрать.

Шерлок, но как?

Answer 2

[GrayHorse]

Spread types may only be created from object types.

И что здесь спреадится? undefined.

В этом закосе по хуки реакта (useSomething) делается так — возвращается объект, чьи поля присваиваются другому объкту путем оператора спреад.

Примеры можно посмотреть в VueUse, например:
github.com/vueuse/.../useMemory/index.ts#L41-L53