Sentry Answers>React>

How to fix the forbidden non-null assertion in TypeScript and React?

How to fix the forbidden non-null assertion in TypeScript and React?

Matthew C.

The ProblemJump To Solution

When using typescript-eslint in a JavaScript application, you may encounter the following error:

Click to Copy
@typescript-eslint/no-non-null-assertion warning: Forbidden non-null assertion

The following example code would cause this error:

Click to Copy
const loggedInUsername = "bob"; const users = [ { name: "Steven", age: 12 }, { name: "Lisa", age: 32 } ]; const loggedInUser = users.find((u) => === loggedInUsername); console.log(loggedInUser!.age);

You can see a live demo of this error in this typescript-eslint playground.

For this error to occur, the eslintrc file has the “no-non-null-assertion” rule set to "error":

Click to Copy
"rules": { "@typescript-eslint/no-non-null-assertion": "error" }

The Non-null Assertion Operator (Postfix !) assertion removes the null and undefined types from a value. To use it, add the ! symbol after an expression like in the console log example above. When your TypeScript configuration is set to do "strictNullChecks", use the non-null assertion operator to bypass the null and undefined type checks. It should only be used if you know a specific value won’t be null or undefined at runtime.

The Solution

Your error message may include a solution to the error:

Click to Copy
Consider using the optional chain operator `?.` instead. This operator includes runtime checks, so it is safer than the compile-only non-null assertion operator.

To fix the example code above, use the optional chain operator when accessing the age property of the loggedInUser:

Click to Copy

If the age property does not exist on the loggedInUser object, the expression will result in undefined instead of throwing an error.

  • Syntax.fmReact Server Components
  • Sentry BlogFixing memoization-breaking re-renders in React
  • logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.


Loved by over 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.