javascript - 如果 querySelector 不返回 null，则简写获取 textContent

Question

我试图找到一种简写方法来完成这样的事情

let text = el.querySelector('.some-class').textContent || ''

但是上面给出了一个错误:

Object is possibly 'null'.

所以我随机决定尝试一下，并且不再出现任何错误。但是，我不知道它在做什么，也不知道它是否正在做我想要它做的事情。

let text = el.querySelector('.some-class')!.textContent || ''

基本上，我正在寻找一种方法，如果找到元素，则触发 textContent 部分，否则触发 || 之后的部分。

我不确定我刚刚写的表达式是什么，所以我真的不知道在这里谷歌什么。

我认为它的意思是不要用空结果来计算表达式，就像定义类型时一样:

public value!: string

如果我是正确的，有没有正确的方法来做我想做的事？

Answer 1

您可以定义一个实用函数:

function getElText(query: string): string {
  const el = document.querySelector(query);
  return el && el.textContent || '';
}

一次optional chaining添加到 JS，您可能可以在 TS/JS 中执行此操作:

let text = el.querySelector('.some-class')?.textContent || ''

在您的工作示例中，!. 告诉 TS 忽略可能的 null 类型，因此您可以访问 el 上的属性，但如果 querySelector 返回 null，您将收到运行时错误。