How to Use the Exclamation Mark in TypeScript?

In this tutorial, I will explain the use of the exclamation mark in TypeScript, also known as the non-null assertion operator. Recently, while working on a project for a client, I encountered a situation where I needed to assure the TypeScript compiler that certain variables were not null or undefined.

This tutorial will help you understand when and how to use the exclamation mark effectively in your TypeScript projects.

What is the Exclamation Mark in TypeScript?

The exclamation mark (!) in TypeScript is used as a non-null assertion operator. It tells the TypeScript compiler that a particular variable cannot be null or undefined, even if the compiler cannot deduce that from the code. This is particularly useful in scenarios where you are certain about the non-nullability of a variable, but the compiler isn’t.

Syntax and Basic Example

The syntax for using the exclamation mark is simple. You place it immediately after a variable or property access to assert that it is non-null or non-undefined.

Here is the syntax:

let element = document.getElementById('myElement')!;
element.style.color = 'blue';

In this example, document.getElementById(‘myElement’) might return null if the element is not found. By appending !, we assert that the element is not null, allowing us to safely access its style property.

TypeScript Exclamation Mark Examples

Now, let me show you a few examples of the TypeScript Exclamation Mark.

Example 1: Access DOM Elements

When working with DOM elements, TypeScript often flags potential null values. Here’s how you can handle this using an exclamation mark.

function updateUserProfile() {
  const userNameElement = document.getElementById('userName');
  // Non-null assertion
  userNameElement!.innerText = 'John Doe';
}

Example 2: Work with Optional Properties

Consider an application for a San Francisco-based company that manages employee records. Each employee might have an optional middleName property:

interface Employee {
  firstName: string;
  lastName: string;
  middleName?: string;
}

function getFullName(employee: Employee) {
  // Non-null assertion
  return `${employee.firstName} ${employee.middleName!} ${employee.lastName}`;
}

const employee: Employee = { firstName: 'Jane', lastName: 'Doe', middleName: 'A.' };
console.log(getFullName(employee)); // Output: Jane A. Doe

You can see the output in the screenshot below.

Example 3: Handle API Responses

When dealing with API responses, you might encounter nullable fields. For example, you’re developing an application for a Miami-based travel agency that fetches flight details:

interface FlightDetails {
  flightNumber: string;
  departureTime: string | null;
}

function displayFlightDetails(details: FlightDetails) {
  const flightInfoElement = document.getElementById('flightInfo');
  // Non-null assertion
  flightInfoElement!.innerText = `Flight Number: ${details.flightNumber}, Departure Time: ${details.departureTime!}`;
}

TypeScript Exclamation Mark After Variable

Let me show you how to use the exclamation mark after a variable in TypeScript. It is particularly useful when dealing with DOM elements or other APIs that might return null.

Here is an example.

Example: DOM Manipulation

const button = document.querySelector('button')!;
button.addEventListener('click', () => {
  console.log('Button clicked!');
});

Here, document.querySelector(‘button’) may return null if no button is found. The ! operator asserts that button is not null.

TypeScript Exclamation Mark in Variable Declaration

In TypeScript, you can also use the exclamation mark in variable declarations to indicate that a variable will not be null or undefined after its initial assignment.

Example: Class Properties

Here is an example to understand this.

class User {
  name!: string;
  constructor(name: string) {
    this.name = name;
  }
}

In this example, the name property is declared with !, telling TypeScript that it will be initialized later, thus avoiding the strictPropertyInitialization error.

TypeScript Double Exclamation Mark After Variable Declaration

The double exclamation mark (!!) is not a TypeScript-specific feature but rather a JavaScript idiom used to convert a value to a boolean.

Example: Boolean Conversion

Here is an example.

let value: any = "Hello, World!";
let isNonEmptyString: boolean = !!value;
console.log(isNonEmptyString); // true

You can see the output in the screenshot below.

Here, !!value converts value to a boolean, which is true if value is truth.

TypeScript Exclamation Mark vs Question Mark

The exclamation mark (!) and question mark (?) serve different purposes in TypeScript. While ! is a non-null assertion operator, ? is used for optional chaining and optional properties.

Example: Optional Chaining

Here is an example.

let user: { name?: string } = {};
console.log(user.name?.toUpperCase()); // undefined

In this example, user.name?.toUpperCase() safely accesses name only if name is defined.

TypeScript Exclamation Mark Before Variable

Using an exclamation mark before a variable is not common in TypeScript. However, in JavaScript, it is used to negate a Boolean value.

Example: Boolean Negation

Here is an example.

let isLoggedIn = false;
if (!isLoggedIn) {
  console.log('User is not logged in.');
}

Here is the exact output:

TypeScript Exclamation Mark Before Dot

The exclamation mark before a dot is not a recognized syntax in TypeScript. However, it can be combined with optional chaining to assert that values are non-null.

Let me show you an example.

Example: Combine Non-Null Assertion with Optional Chaining

let user: { name?: string } = { name: "John" };
console.log(user.name!.toUpperCase()); // JOHN

Here, user.name! asserts that the name is not null or undefined before calling toUpperCase().

TypeScript Exclamation Mark in Type Definition

In type definitions, the exclamation mark is not typically used. Instead, TypeScript uses ? to denote optional properties.

Example: Type Definition with Optional Properties

interface User {
  name: string;
  age?: number;
}

In this example, age is an optional property, meaning it may or may not be present on User objects.

Conclusion

The exclamation mark in TypeScript helps to assert non-nullability in scenarios where the compiler is unsure. I have explained how to use it here with various examples.

You may also like:

• Double Question Mark (??) Operator in TypeScript
• Difference Between == and === in TypeScript
• How to Convert React Component to TypeScript
• 100 TypeScript Interview Questions And Answers

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/