typescript - 如何在 Vue3 中使用 TypeScript 为 ref 定义类型(绑定(bind)模板)？

Question

模板:

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

脚本:

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

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

Answer 1

好吧，这取决于您是否需要输入它并提供成员信息(公共(public)属性、方法等)。如果你这样做了，那么是的，你需要为它定义一个类型；否则，您不必这样做，并且可以简单地使用 .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 中，你没有类型检查，所以通过 null在 ref函数就像不传递任何东西一样好(这对于模板引用特别好)*；从某种意义上说，它甚至可能具有误导性，即展开的值实际上解析为其他东西，但 null .
* 在使用 Composition API 时，“reactive refs”和“template refs”的概念是统一的。以及我们访问这种特殊类型的 ref 的原因在挂载的钩子(Hook)上是因为 DOM 元素将被分配给它 初始渲染后 .
引用:

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