时间戳

首页 > 解决方案 > 如何在 Vue3 中使用 TypeScript 为 ref 定义类型（绑定模板）？

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

问题描述

模板：

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

脚本：

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

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

如何确保 value 的类型正确element？

标签： typescriptvue.jsvuejs3

解决方案

好吧，这取决于您是否需要输入它并提供成员信息（公共属性、方法等）。如果你这样做了，那么是的，你需要为它定义一个类型；否则，您不必这样做，并且可以简单地访问未包装的引用，.value并将其保留为类型any（我敢打赌您已经知道了这个）。

但是，如果必须，您需要告诉编译器它是什么或将要分配什么。为此，您需要使用（不带参数）的第三个重载ref并将泛型类型显式设置为所需的类型 - 在您的情况下，您想要HTMLDivElement（或者只是HTMLElement如果您不关心它的特定成员必须提供）。

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

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

    return {
      el
    }
  }
})

在 JavaScript 中，您没有类型检查，因此传递null函数ref与不传递任何内容一样好（这对于模板 ref 尤其适用）*；从某种意义上说，它甚至可能具有误导性，即展开的值实际上解析为其他东西，但 null.

* 在使用 Composition API 时，“reactive refs”和“template refs”的概念是统一的。我们在refmount 钩子上访问这种特殊类型的原因是因为 DOM 元素将在初始渲染后分配给它。

参考：

推荐阅读