Vue3中Computed属性遇TypeScript‘对象可能未定义’错误的解决求助

针对你遇到的问题，先分析现有写法的问题，再给出可行解决方案：

现有写法的问题 #

1. 第一种写法：仅在if分支返回数值，但未处理不满足条件的情况，TypeScript会推断该computed的返回类型为number | undefined，若代码中要求它必须是number类型，就会触发错误。
2. 第二种写法：仅声明了返回类型，但缺少完整的函数体，属于语法错误，无法解决问题。

可行解决方案 #

方案1：给依赖的响应式变量设置默认值 #

如果userFirstnameLenght和userLastnameLenght是ref类型，初始化时设置默认数值，确保它们的value永远不会是undefined：

import { ref, computed } from 'vue'

const userFirstnameLenght = ref<number>(0)
const userLastnameLenght = ref<number>(0)

const totalNameLenght = computed(() => {
  return userFirstnameLenght.value + userLastnameLenght.value
})

方案2：处理所有分支并明确返回类型 #

如果依赖变量可能为undefined，需要给computed明确返回类型，同时覆盖所有代码分支：

// 要求返回number类型时，给else分支设置默认值
const totalNameLenght = computed((): number => {
  if (userFirstnameLenght.value && userLastnameLenght.value) {
    return userFirstnameLenght.value + userLastnameLenght.value
  }
  // 不满足条件时返回默认值（比如0）
  return 0
})

// 允许返回undefined时，明确返回undefined
const totalNameLenght = computed((): number | undefined => {
  if (userFirstnameLenght.value && userLastnameLenght.value) {
    return userFirstnameLenght.value + userLastnameLenght.value
  }
  return undefined
})

方案3：使用非空断言（谨慎使用） #

如果你能确保userFirstnameLenght.value和userLastnameLenght.value永远不会是undefined，可以用非空断言!告诉TypeScript跳过undefined检查：

const totalNameLenght = computed(() => {
  return userFirstnameLenght.value! + userLastnameLenght.value!
})

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo