Vue3+Vite+TS中VueUse onClickOutside类型错误修复问询

问题出在你定义的onClickOutsideHandler被TS推断成了联合类型数组，而VueUse的v-on-click-outside指令要求的是固定顺序的元组类型（处理函数 + 配置对象）。

修复方案一：使用as const断言强制推断为元组 #

直接在数组末尾添加as const，让TS明确这是一个固定结构的元组，而非元素类型不确定的数组：

<script setup lang="ts">
import { ref, Ref } from 'vue'
import { vOnClickOutside } from '@vueuse/components'

const isShow = ref(false)
const ignoreElRef: Ref<HTMLElement | null> = ref(null)

const onClickOutsideHandler = [
    () => {
        isShow.value = false
    },
    {
        ignore: [ignoreElRef],
    },
] as const // 添加类型断言
</script>

修复方案二：显式指定元组类型 #

提前导入OnClickOutsideOptions类型，给onClickOutsideHandler指定明确的元组类型：

<script setup lang="ts">
import { ref, Ref } from 'vue'
import { vOnClickOutside, OnClickOutsideOptions } from '@vueuse/components'

const isShow = ref(false)
const ignoreElRef: Ref<HTMLElement | null> = ref(null)

// 显式指定元组类型
const onClickOutsideHandler: [() => void, OnClickOutsideOptions] = [
    () => {
        isShow.value = false
    },
    {
        ignore: [ignoreElRef],
    },
]
</script>

报错原因说明 #

TS默认会把[函数, 对象]这种数组推断成((() => void) | { ignore: Ref<HTMLElement | null>[]; })[]，也就是元素可以是函数或对象的任意数组，但VueUse的指令期望的是第一个元素必须是处理函数，第二个必须是配置对象的固定元组，类型不匹配导致报错。上述两种方法都是让TS正确识别数组的固定结构，匹配指令要求的类型。

内容的提问来源于stack exchange，提问作者karzol73