!. typescript operator understanding

Question

Whenever I use the !. operator with typescript, my compilation errors dissapear, but I searched a bit, and I am not clear what !. stands for.

For example, finding a div:

let twelveDiv = Array.from(timePickerDivs).find(element => element.innerHTML === '12')

This produces a compilation error that makes sense:

twelveDiv?.innerHTML = '00'; //The left-hand side of an assignment expression may not be an optional property access.ts(2779)

However the !. solves it:

twelveDiv!.innerHTML = '00'; // no compilation error.

Same for a simple class:

class MyAwesomeClass {
  private myNumber: number; //Property 'myNumber' has no initializer and is not definitely assigned in the constructor.ts(2564)
}

In this case both ?. and !. solves the compilation error.

I am familiar with the ?. for the optional properties and arguments in functions/classes, but not that much with the !.. Thanks.

Nicholas Tower · Accepted Answer · 2021-04-21 17:07:14Z

2

The ! is the non-null assertion operator. You are telling typescript "i know this looks like it might be null/undefined, but trust me, it's not". This is occasionally needed in cases where typescript can't figure out that your code eliminates the possibility of a null or undefined.

But be aware that like any type assertion, you are telling typescript not to check your work. If you use it, and it actually can be null/undefined, typescript will not alert you to this fact, and you'll get an error at runtime.

edited Apr 21, 2021 at 17:07

answered Apr 21, 2021 at 17:02

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

!. typescript operator understanding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related