如何使用TypeScript在Vue3中定义引用(Binding on template)的类型？

Question

模板：

<tremplate>
  <div ref="element"></div>
</template>

脚本：

export default {
  setup() {
    const elelemt = ref(null);
    return {
      element,
    };
  },
};

这是在vue3中定义ref的正常方式，但是是以JavaScript方式定义的。如果我使用TypeScript，我将需要为值element定义一个类型，对吗？

如何确保值element的类型正确

Answer 1

好吧，这取决于你是否需要它的类型和提供成员信息(公共属性，方法等)。如果你这样做了，那么你需要为它定义一个类型；否则，你不需要这样做，只需用.value访问未包装的引用，就可以将它保留为any类型(我打赌你已经知道了这一点)。

但是如果你必须这样做，你需要告诉编译器它的是，或者它将被赋值到什么地方。为此，您需要使用the third overload of ref (不带参数)，并显式地将泛型类型设置为所需的类型-在本例中，您希望使用HTMLDivElement (或者，如果您不关心它提供的特定成员，则只需使用HTMLElement )。

export default defineComponent({
  setup() {
    const el = ref<HTMLDivElement>();

    onMounted(() => {
      el.value // DIV element
    });

    return {
      el
    }
  }
})

在JavaScript中，您没有类型检查，所以在ref函数上传递null与不传递任何东西一样好(这对于模板引用来说特别好)*；它甚至可能被误导，因为取消包装的值实际上解析为null以外的其他值。

*在使用组合API时，reactive refs和template refs的概念是统一的。我们之所以在挂载的钩子上访问这种特定类型的ref，是因为DOM元素将在初始呈现之后被分配给它。

参考文献：

• https://v3.vuejs.org/guide/composition-api-template-refs.html#template-refs

Answer 2

这行不正确：

    const el = ref<HTMLDivElement>();

el不是HTMLDivElement。相反，它是元素的代理。该代理$el是实际的HTMLDivElement。虽然我不确定我是否做对了。在一个组件中，我设法将其键入如下：

import { ComponentPublicInstance, defineComponent, ref } from 'vue';

export default defineComponent({
  // snipped...
  setup() {
    const field = ref<ComponentPublicInstance<HTMLInputElement>>();
    return {
      field,
      fun() { field.value.$el.value = 'some value'; }
    };
  }
  // snipped...
});

Answer 3

Vue 3.2+

<template>
   <input ref="fileInput" style="display: none;" type="file" @change="onFileSelected" />
   <button @click="fileInput?.click()">Pick Files</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const fileInput = ref<HTMLDivElement>()

function onFileSelected(event: any) { console.log("Event: " + event) }
</script>

第二个示例

<template>
   <div ref="coolDiv">Some text</div>
   <button @click="changeCoolDiv">Pick Files</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const coolDiv = ref<HTMLDivElement>()

function changeCoolDiv() {
  if(coolDiv) {
    coolDiv.value // Div element
  }
}
</script>