Vue 3.0.0.rc-5 中的 TypeScript 3.9.7 可选链接警告

Posted 2023-02-22

【中文标题】Vue 3.0.0.rc-5 中的 TypeScript 3.9.7 可选链接警告

【英文标题】：TypeScript 3.9.7 optional chaining warning in Vue 3.0.0.rc-5

【发布时间】：2020-11-29 07:48:21

【问题描述】：

出现 Vetur 错误“无法调用可能‘未定义’的对象。”在应该没问题的线路上。我确实在 Vetur 的 VS 代码设置中选中了“使用工作区依赖项”。

import  defineComponent  from "vue"

export default defineComponent(
  name: "FormGroup",
  setup(_,  emit, slots ) 
    const validationErrorFree = () => 
      const vnodes = slots?.default() // <-- Vetur errors on slots?.default()
      const formInputs = vnodes.filter(
        (vnode) => vnode?.componentOptions?.tag === "FormInput",
      )
      ...

Vetur 不应该理解 TypeScript 可选链吗？我也尝试添加

if (slots === undefined) return true

在显示错误的行之前（并且它没有改变任何东西）。包装也一样：

if (slots !== undefined) 

围绕函数的内部。对我忽略了什么有什么想法？

【问题讨论】：

使用非空断言操作符! 告诉转译器，即使它可能为空，请将其视为非空。您可以使用非空断言运算符与空传播/可选链接运算符一起使用，尽管我忘记了它们的运行方式，例如（两者任一 ！？）。请检查下一个有好的答案的评论

这能回答你的问题吗？ TypeScript says 'Object is possibly null' even though I explicity set it

【参考方案1】：

使用! non null assertion operator slots!.default() 断言Really! I'm not null

请记住，你应该确保你知道它不会为空，否则你会得到一个错误，比如无法在 undefined 上调用 default()。

考虑到它为空的可能性可能是明智的，您可以在检查后使用空断言运算符来确保它不为空。

【讨论】：

虽然 slot!?.default() 也显示错误，但 slot.default!() 有效。想要修改您的答案以便我将其标记为正确？

啊，也许它是您使用的 TS 的确切版本，如果可行，我会修改答案

是的，slots.default!() 适用于 TS 3.9.7 - 谢谢！

我刚刚看了看，我正在使用TS ^3.9.3，也许行为已经改变，它们不再允许这两个运算符一起使用

啊，是的，在 3.9 中，他们 introduced this change 阻止了将这些运算符作为 babel 一起使用，用户发现这与直觉相反。所以这似乎是一个短暂的组合，解释了为什么我没有在网上找到很多关于它使用的材料