Using the non-null assertion operator

In this lesson, we will learn how the non-null assertion operator can narrow a type.

Understanding use cases for the non-null assertion operator

We are going to explore the non-null assertion operator in the code editor below:

Open exercise in CodeSandbox

The code contains a function that has a type error in its return statement.

So, this is a case where we know more about the code than TypeScript does. We can, of course, use a type assertion to resolve the type error. However, the non-null assertion operator is a more concise solution to type errors that involve null or undefined.

It is worth noting that if the code were more straightforward, then TypeScript would understand that text on the return statement wasn't null.

Copy
function duplicate(text: string | null) {
  if (text === null || text === undefined) {
    text = "";
  }
  return text.concat(text);
}

Our code is running in strict mode with strictNullChecks on. If strictNullChecks is off, then the non-null assertion operator isn't required. We will learn about strict mode and strictNullChecks later in this course.

Non-null assertion operator syntax

The non-null assertion operator is an exclamation mark (!), and this is placed after the variable or expression that we want to tell TypeScript isn't null or undefined.

An example

• Update the return statement in code with the non-null assertion operator to resolve the type error.

Nice!

Summary

The non-null assertion operator is a concise way of avoiding unnecessary null and undefined checks in our code. We should only use this when we definitely know the variable or expression can't be null or undefined.