Understanding the Non-null Assertion Operator '!'

So what is the ! in TypeScript?

This is actually known as a non-null assertion operator.

Take for example the following code:

type Item = {
  title: string;
  value: string;
};
 
const items: Item[] = [
  { title: "Foo", value: "Foo" },
  { title: "Bar", value: "Bar" },
  { title: "Alpha", value: "Alpha" },
];
 
// Exclamation mark at the end of the Array.find() function
const getAlpha = items.find((item) => item.title === "Alpha")!;

The following will return a type Item | undefined. In some scenarios, we are not allowed to parse an undefined value and therefore we need to write extra code just to handle the undefined value first.

One of the most common way is to do the following.

if (getAlpha) {
  return <SomeComponent alpha={getAlpha} />;
}

Or we could type cast it back to the Item type like the following.

<SomeComponent alpha={getAlpha as Item} />

However, with the ! in TypeScript. We are able to just do the following and return the type Item quickly.

const getAlpha = items.find((item) => item.title === "Alpha")!;

The use of ! however does not remove the fact that the Array.find() will not return a null or undefined at all.

Swift

Swift is used as the programming language for creating apps on iOS, macOS, watchOS.

Since I have created an Augmented Reality(AR) App in Swift before, the ! works very similarly and is very commonly used.

The ! in Swift is used to force unwrapping of optionals.

Example:

let title: String? = "Foo"
 
if title != nil {
    var something = title!
}

So as you have guessed it, the ! actually forces the optional value in the variable name and gain access to the String value.

Summary

And that is all for this post. Just wanted to share something regarding the ! operator that I discovered while writing code in Swift and now being able to also use it in TypeScript.