Vue Composition API - 使用 TypeScript 获取 ref

Posted 2023-02-16

【中文标题】Vue Composition API - 使用 TypeScript 获取 ref

【英文标题】：Vue Composition API - getting a ref using TypeScript

【发布时间】：2020-11-11 07:39:42

【问题描述】：

Vetur 在下面这一行加下划线：

const firstRef = ref<htmlElement>(null)

没有重载匹配此调用。 Overload 1 of 3, '(raw: HTMLElement): Ref'，给出了以下错误。 “null”类型的参数不能分配给“HTMLElement”类型的参数。 Overload 2 of 3, '(raw: HTMLElement): Ref'，给出了以下错误。 “null”类型的参数不能分配给“HTMLElement”类型的参数。Vetur(2769)

这是一个简明的上下文。任何想法我做错了什么？

<template>
  <input id="first" ref="firstRef">
  <button type="button" @click.prevent="focusFirst">Focus</button>
</template>

<script lang="ts">
import  defineComponent, ref  from "@vue/composition-api"
export default defineComponent(
  name: "Test",
  setup() 
    const firstRef = ref<HTMLElement>(null)
    const focusFirst = () => 
      const theField = firstRef.value
      theField.focus()
    

    return  focusFirst 
  
</script>

【参考方案1】：

正如 Vetur 所说，您不能将 null 类型转换为 HTMLELement 类型。解决此问题的一种可能方法是编写：

const firstRef = ref<HTMLElement | null>(null)

但是，请记住，每次要使用 firstRef 时，都必须检查其类型是否为 null。你也可以这样做：

if (firstRef.value) 
  // do stuff with firstRef
  // typescript knows that it must be of type HTMLElement here.

【讨论】：

谢谢。这行得通，但我不得不使用 firstRef.value。如果您更新您的答案，我会将其标记为正确。

我才刚刚开始，所以我不确定利弊，但您似乎可以使用const firstRef = ref<HTMLElement>()，这只会使引用HTMLElement | undefined，但它是短一点。从技术上讲，您也可以使用 ref<HTMLElement>(null!) 之类的东西来覆盖类型系统，但这可能不是一个好主意，因为它可能会在 ref 初始化之前（例如，在安装组件之前）导致不安全的使用。

它也可以@jon_wu，但是undefined 的含义与javascript 中的null 不同。我认为null，根据它的定义，更适合这个用例。因为undefined 会暗示firstRef.value 不存在。

@Keimeno 完全同意null 感觉更正确和纯粹。只是在想，对于某些人来说，他们可能更喜欢更简洁的选项的简洁性和潜在的可读性。在实践中，在null | undefined | HTMLElement 之间，您可能经常只关心某事是否真实，例如if (firstRef.value).

【参考方案2】：

另一种方法可能是可选链接（自 TS 3.7 起）：

firstRef.value?.focus()

这对于 TS 来说没问题，并且仅当 firstRef.value 不为 null 或未定义时才执行命令。