Difference Between == and === in TypeScript

In this tutorial, I will explain the difference between == and === in TypeScript. Recently, while working on a project for a client based in New York, I encountered a bug that was caused by incorrect usage of these two operators. This tutorial will help you avoid similar issues and write more robust TypeScript code.

What Are == and === in TypeScript?

In TypeScript, as well as in JavaScript, == and === are used for comparison. However, they behave differently, and understanding these differences is crucial for writing error-free code.

The == Operator

The == operator in TypeScript is known as the equality operator. It compares two values for equality after converting both values to a common type. This type coercion can lead to unexpected results if you’re not careful.

Here is an example.

Example:

let age: any = "30";
let ageNumber: number = 30;

if (age == ageNumber) {
    console.log("The ages are equal.");
} else {
    console.log("The ages are not equal.");
}
// Output: The ages are equal.

In this example, age is a string and ageNumber is a number. The == operator converts the string "30" to the number 30 before comparing, resulting in a true comparison.

I executed the above script using VS code, and you can see the exact output in the screenshot below:

typescript == vs ===

Also, check out Double Question Mark (??) Operator in TypeScript

The === Operator

The === operator in TypeScript is known as the strict equality operator. It compares both the value and the type without converting either value.

Example:

Let me show you an example.

let age: any = "30";
let ageNumber: number = 30;

if (age === ageNumber) {
    console.log("The ages are strictly equal.");
} else {
    console.log("The ages are not strictly equal.");
}
// Output: The ages are not strictly equal.

In this example, age is a string and ageNumber is a number. The === operator does not perform type conversion, so the comparison returns false.

Here is the exact output you can see in the screenshot below:

Difference Between == and === in TypeScript

Check out Exclamation Mark in TypeScript

TypeScript == vs ===: Real Example

Now, let me show you a real example of how to use == vs === in TypeScript.

Consider a situation where you’re developing a user registration form for a tech event in San Francisco. It would help if you compared user inputs to validate data. Using == might lead to incorrect validations due to type coercion.

Example:

let userInput: any = "25";
let minimumAge: number = 21;

if (userInput == minimumAge) {
    console.log("User meets the minimum age requirement.");
} else {
    console.log("User does not meet the minimum age requirement.");
}
// Output: User does not meet the minimum age requirement.

In this case, userInput is a string, and minimumAge is a number. The == operator converts userInput to a number and performs the comparison. If userInput were "21", the result would be true, which might not be the desired behavior.

By using ===, you can ensure that the comparison is strict and only returns true if both value and type match.

Example:

let userInput: any = "21";
let minimumAge: number = 21;

if (userInput === minimumAge) {
    console.log("User meets the minimum age requirement.");
} else {
    console.log("User does not meet the minimum age requirement.");
}
// Output: User does not meet the minimum age requirement.

Here, the === operator ensures that the types are also compared, preventing incorrect validations.

Check out How to Run TypeScript Files?

TypeScript == vs ===

Here’s a summary of the differences between == and === in TypeScript:

Feature== (Equality Operator)=== (Strict Equality Operator)
Type ConversionYes, performs type conversion before comparison.No, does not perform type conversion.
Comparison CriteriaCompares values after converting them to a common type.Compares both value and type without conversion.
Use CaseCan lead to unexpected results due to type coercion.Preferred for strict and predictable comparisons.
Example"30" == 30 evaluates to true."30" === 30 evaluates to false.
Best PracticeUse with caution, understand potential type coercion impacts.Use for most comparisons to ensure type safety.

Conclusion

As a TypeScript developer, you should know the difference between == and === in TypeScript to write bug-free code. While == allows type coercion, === ensures strict comparison, including type matching. Always prefer === for comparisons to avoid unexpected results due to type conversion in TypeScript.

You may also like: