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

Question

I was try trying to find a shorthand way to do something like this

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

However the above gives an error:

Object is possibly 'null'.

So I randomly decided to try this, and I get no errors any more. However, I don't know what it is doing or if it is doing what I want it to do.

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

Basically I am looking for a way to trigger the textContent part if an element is found otherwise trigger the part after the ||.

I am not sure what the expression I just wrote is, so I don't really know what to Google here.

What I think it is saying is to not evaluate the expression with a null result like when defining a type:

public value!: string

If I am correct is there a proper way to do what I would like?

Answer 1

You could define a utility function:

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

Once optional chaining gets added to JS, you will likely be able to do this in TS/JS:

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

In your working example, the !. is telling TS to ignore the possible null type, so you can access properties on el , but if querySelector returns null , you will get a runtime error.

Answer 2

TypeScript is warning you that el.querySelector('.some-class') may return null . Essentially, if for whatever reason no element in your DOM matches that selector query (.some-class), you'll get null back. Then if you try to read the .textContent of null, that'll throw an exception. TypeScript is fore-warning you about this possibility.

To achieve the effect you desire, you can do something like:

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

As far as why putting a ! got rid of the error message, that's TypeScript's bang non-null-assertion operator described here . With the ! you're essentially telling TypeScript not to worry about the null possibility. It's useful when you, as the developer with knowledge of other parts of your application, can assert that a parameter won't be null.

Answer 3

可选链接和无效合并是typescript 3.7 的一部分，因此您现在可以使用：

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