🧰 TypeScript – Operators Explained with Examples and Best Practices

🧲 Introduction – What Are Operators in TypeScript?

Operators in TypeScript are symbols or keywords used to perform operations on variables and values. These include arithmetic operations, comparisons, logical checks, bitwise manipulation, and more.

🎯 In this guide, you’ll learn:

• Different types of operators in TypeScript
• Syntax and behavior of each operator
• Code examples with explanations
• Best practices and real-world use cases

---

📚 Topics Covered

🔢 Operator Type	📄 Description
Arithmetic Operators	Perform basic mathematical calculations
Relational (Comparison)	Compare values and return Boolean results
Logical Operators	Combine Boolean expressions
Assignment Operators	Assign values to variables
Bitwise Operators	Perform binary-level operations
Miscellaneous Operators	Include typeof, ternary, etc.
Type Operators	Used for type checking and assertions

---

➕ 1. Arithmetic Operators

These operators perform mathematical operations on numbers.

Operator	Name	Example	Output
+	Addition	5 + 2	7
-	Subtraction	5 - 2	3
*	Multiplication	5 * 2	10
/	Division	10 / 2	5
%	Modulus	5 % 2	1
++	Increment	x++	x + 1
--	Decrement	x--	x – 1

🧪 Example:

let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a % b); // 1

✅ The % operator returns the remainder of the division.

---

⚖️ 2. Relational (Comparison) Operators

Used to compare two values and return a Boolean (true or false).

Operator	Name	Example	Output
==	Equal to	5 == '5'	true
===	Strict Equal	5 === '5'	false
!=	Not Equal	5 != '5'	false
!==	Strict Not Equal	5 !== '5'	true
>	Greater than	5 > 3	true
<	Less than	5 < 3	false
>=	Greater or Equal	5 >= 5	true
<=	Less or Equal	3 <= 5	true

🧪 Example:

console.log(10 === 10); // true
console.log(10 === '10'); // false (strict comparison)

---

🧠 3. Logical Operators

Used to combine Boolean expressions.

Operator	Name	Example	Output
&&	AND	true && false	false
`		`	OR
!	NOT	!true	false

🧪 Example:

let x = 5;
console.log(x > 3 && x < 10); // true
console.log(!(x < 3));        // true

---

📝 4. Assignment Operators

Used to assign values to variables.

Operator	Description	Example	Equivalent
=	Assign	x = y	—
+=	Add and assign	x += y	x = x + y
-=	Subtract and assign	x -= y	x = x - y
*=	Multiply and assign	x *= y	x = x * y
/=	Divide and assign	x /= y	x = x / y
%=	Modulus and assign	x %= y	x = x % y

🧪 Example:

let num = 10;
num += 5; // 15
num *= 2; // 30

---

⚙️ 5. Bitwise Operators

Used to perform bit-level operations.

Operator	Name	Binary Example	Result
&	AND	5 & 1 → 101 & 001	1
`	`	OR	`5
^	XOR	5 ^ 1	4
~	NOT	~5	-6
<<	Left shift	5 << 1	10
>>	Right shift	5 >> 1	2

🧪 Example:

console.log(5 & 1);  // 1
console.log(5 | 1);  // 5

---

🧩 6. Miscellaneous Operators

🔹 typeof

Returns the type of a variable.

let name = "TypeScript";
console.log(typeof name); // string

🔹 ? : (Ternary Operator)

Shorthand for if...else.

let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // Adult

---

🔎 7. Type Operators

🔹 instanceof

Checks if an object is an instance of a class.

class Car {}
let myCar = new Car();
console.log(myCar instanceof Car); // true

🔹 in

Checks if a property exists in an object.

let obj = { name: "TS" };
console.log("name" in obj); // true

---

⚠️ Common Mistakes to Avoid

Mistake	Fix / Explanation
Using == instead of ===	Always use === for strict equality
Dividing by 0	Returns Infinity – watch for runtime issues
Confusing assignment with equality	= assigns, === checks equality
Using bitwise instead of logical	Use &&, not & for logical AND

---

📌 Summary – Recap & Next Steps

Operators are the foundation of computation in TypeScript. From simple math to advanced logic and type checking, knowing when and how to use them is critical for writing concise, correct, and performant code.

🔍 Key Takeaways:

• Arithmetic operators perform basic math
• Logical and comparison operators evaluate conditions
• Assignment operators simplify updating variables
• Type operators like typeof, in, and instanceof improve type safety
• Use === over == for consistent results

⚙️ Real-world relevance: Used in loops, conditions, arithmetic, type checks, and DOM manipulation in every TypeScript project.

---

❓ FAQs – Operators in TypeScript

❓ What is the difference between == and ===?
✅ == checks for equality with type coercion. === checks for equality with type and value — it’s stricter and safer.

❓ Can you use ternary operator inside expressions?
✅ Yes. It’s often used to conditionally assign values:

let isAdmin = true;
let access = isAdmin ? "Granted" : "Denied";

❓ What does typeof return?
✅ It returns a string like "string", "number", "object", "undefined", etc.

❓ What’s the use of instanceof?
✅ It checks if an object was created by a specific class constructor. Ideal for custom class checks.

---

Share Now :