如何在 Vue3 中使用 TypeScript 定义 ref 的类型（在模板上绑定）？

Question

模板：

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

脚本：

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

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

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

原文由 Shook Lyngs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

    return {
      el
    }
  }
})

在 JavaScript 中，你没有类型检查，所以在 ref 函数上传递 null 函数和不传递任何东西一样好（这对模板引用来说特别好）*；从某种意义上说，它甚至可能会产生误导，即展开的值实际上解析为其他东西， 但 null 。

\* 使用 Composition API 时，统一了“反应式引用”和“模板引用”的概念。我们在挂载的钩子上访问这种特殊类型的 ref 的原因是因为 DOM 元素将 在初始渲染后 分配给它。

参考：

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

原文由 Yom T. 发布，翻译遵循 CC BY-SA 4.0 许可协议