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, 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.

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.

I executed the above example code and added the screenshot below.

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.

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.

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.

I executed the above example code and added the screenshot below.

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

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.

TypeScript == vs ===

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

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:

• How to Use Try Catch in TypeScript?
• TypeScript Interview Questions and Answers
• React Component Types in TypeScript
• Is TypeScript Frontend or Backend?

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/