Question

我正试图找到一种捷径来做这样的事情

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

但是以上给出了错误：

对象可能为'null'。

因此，我随机决定尝试此操作，并且再也没有出现错误。但是，我不知道它在做什么，或者它是否在做我想要它做的事情。

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

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

我不确定我刚才写的表情是什么，所以我真的不知道Google在这里要做什么。

我想说的是不要像定义类型时那样以空结果求表达式：

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返回{{ 1}}，您将收到运行时错误。

Answer 2

TypeScript警告您el.querySelector('.some-class')可能返回null。本质上，如果由于某种原因，DOM中没有任何元素与该选择器查询（.some-class）匹配，您将得到null的返回。然后，如果您尝试读取null的.textContent，则将引发异常。 TypeScript会警告您这种可能性。

要获得所需的效果，可以执行以下操作：

let element = el.querySelector('.some-class');
let text = element ? element.textContent : "";

至于为什么放置!摆脱了错误消息，那就是TypeScript的爆炸式非空断言运算符described here。使用!，您实际上是在告诉TypeScript不必担心null的可能性。当您作为了解应用程序其他部分的开发人员可以断言参数不会为null时，这很有用。

Answer 3

Optional chaining和nullish coalescing是打字稿3.7的一部分，因此您现在可以使用：

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

如果querySelector不返回空值，则速记获取textContent

3 个答案: