Vue 3 模板函数引用是什么类型？

Question

VUE 3允许使用一个函数来分配REF，

const target = ref<Element>()

const functionRef = (ref: Element) => {
  target.value = ref
}

<template>
  <div :ref="functionRef" />
</template>

但是，Volar和Typescript都会抱怨：ref =“ FunctionRef”绑定具有类型不匹配。

类型'（ref：element）=＆gt; void'无法分配到type'字符串|参考| （（ref：element | componentPublicInstance＆lt; {}，{}，{}，{}，{}，{}，{}，{}，{}，{}，false，false，componentOptionsbase＆lt; and oshy，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何，任何任何，{}＆gt;＆gt; |未定义'。

Runtime-dom.d.t.ts（1479，3）：预期类型来自属性“ ref”，该属性在类型的“ elementattrs”

上在此处声明

是什么函数ref的类型？

Answer 1

import { ComponentPublicInstance } from 'vue';
const functionRef = (ref: ComponentPublicInstance | null | Element) => {
  target.value = ref
}
<div :ref="functionRef" />

Answer 2

Runtime-dom.d.ts链接包含以下定义。

type ReservedProps = {
  key?: string | number | symbol
  ref?:
    | string
    | RuntimeCore.Ref
    | ((ref: Element | RuntimeCore.ComponentPublicInstance | null) => void)
  ref_for?: boolean
  ref_key?: string
}

该定义可以在源在这里。

重要的部分是ref？的第三个联合类型，

(ref: Element | RuntimeCore.ComponentPublicInstance | null) => void

这意味着您可以为ref Ref参数定义可重复使用的类型，如下所示。

// this may not be necessary depending on where you put this definition
import * as RuntimeCore from '@vue/runtime-core'

type VueRef = (ref: Element | RuntimeCore.ComponentPublicInstance | null) => void

您现在可以使用ARG的新类型更新功能参考

const target = ref<Element>()

const functionRef = (ref: VueRef) => {
  target.value = ref
}