Answer.

The Non-Null Assertion Operator (!) is a special syntax in TypeScript that allows you to explicitly tell the compiler: "I know that the variable is not null or undefined at this point." This operator was introduced to solve type issues in scenarios where the programmer is confident in the existence of a value, but TypeScript cannot guarantee it due to its strict analysis.

Background

TypeScript strictly relates to the possibility of variables being null or undefined, especially when the strictNullChecks option is enabled. To avoid compiler warnings in situations where the programmer is sure about the safety of a value, the non-null assertion was introduced.

The Problem

TypeScript cannot always track all code branches and understand that it's unnecessary to perform null checks in certain conditions. This often occurs after asynchronous code, in callbacks, or when manipulating DOM elements.

The Solution

The Non-Null Assertion Operator (!) tells the compiler that null/undefined is absent at that point, removing the type error.

Example code:

function processUser(user?: {name: string}) {
  // TS will produce an error without the operator: user may be undefined
  console.log(user!.name); // The ! operator promises that user is defined
}

Key features:

Only removes compilation-time errors, does not affect runtime logic.
Used exclusively where the non-null-ness of a value is guaranteed.
Excessive or unintentional use leads to runtime errors.

Tricky Questions.

Can you use ! for any value of any type? For example: let x: number = y!

The ! operator only makes sense for types that potentially contain null/undefined according to the compiler. It has no effect for strictly typed variables without nullable.

Does ! completely replace the null/undefined check? Is a runtime check needed?

No, the ! operator does not perform checks at runtime. It only assists the compiler, and if the actual value turns out to be undefined/null, a runtime error will occur.

function foo(data?: string) {
  // may lead to an error
  alert(data!.length);
}

Can ! save you from errors in asynchronous code if the original variable is changed in another thread?

No. The ! operator only works at the point of application. If the value becomes undefined between the check and usage, errors are inevitable. One must always be confident about the current non-null status.

Common Errors and Anti-patterns

Using ! to "suppress" an error when unsure of the value's presence.
Widespread application without real understanding of the context.
Applying ! in places where there is a required type or assured runtime check.

Real-life Example

Negative case

Within a React component, accessing the DOM through ref with the ! operator without prior checks:

const ref = useRef<HTMLDivElement>(null);
ref.current!.focus(); // if ref.current is null, runtime error will occur

Pros:

Suppresses compilation error.

Cons:

A critical runtime error may occur when accessing a non-existent element.

Positive case

Using existence checks before applying:

if (ref.current) {
  ref.current.focus();
}