TypeScript for Beginners: Mastering Comparison Operators

Here’s the article.

---

Here’s something that trips up a lot of newcomers: in JavaScript, the expression "5" == 5 returns true. Two different types, silently treated as equal. TypeScript was built specifically to stop that kind of quiet chaos, and nowhere is that mission clearer than in how it handles typescript comparison operators. By the end of this guide, you’ll be able to write comparison logic that TypeScript’s compiler actively helps you get right – catching type mismatches before your code ever runs, and using comparisons to narrow types with confidence.

Think of TypeScript’s type checker like a very attentive proofreader standing over your shoulder. JavaScript will let you compare a apple to an orange and just shrug when the answer doesn’t quite make sense. TypeScript’s proofreader stops you at the sentence, points at the mismatch, and says “these aren’t the same kind of thing – are you sure?” That single habit, checked early and often, is what separates confident TypeScript developers from people who are just writing JavaScript with extra steps.

Prerequisites

Image: Tech History Lab (via Udemy course og:image)

Before you start, you’ll want:

• Node.js installed (version 18 or later is fine) – this gives you npm to install TypeScript.
• A basic grasp of JavaScript fundamentals: variables, if statements, and functions. If you’ve never written an if statement before, spend twenty minutes on that first.
• A code editor with TypeScript support. Visual Studio Code works out of the box; if you’re coming from a PHP background, it’s worth knowing that editor tooling matters just as much there – see our guide on the Official Laravel Zed Extension for a sense of how language servers plug into editors generally.
• Fifteen minutes and a terminal. That’s genuinely all this takes to get running.

You don’t need prior TypeScript experience. You do need to be comfortable typing commands into a terminal.

Step 1: Install TypeScript and set up a project

You install TypeScript with npm, then initialise a config file that tells the compiler how strict to be. Run these two commands in an empty folder:

npm install -g typescript
tsc --init

You’ll see a new tsconfig.json file appear. Open it and make sure this line is present and set to true:

{
  "compilerOptions": {
    "strict": true
  }
}

This matters more than it looks. Strict mode is what makes TypeScript’s type system take your comparison operators seriously rather than just tolerating loose JavaScript habits. Without it, you’re leaving most of the safety net switched off.

Common mistake: skipping --init and writing TypeScript files without a tsconfig.json. The compiler will still run, but you lose project-wide settings like strict mode, and errors that should stop you get silently downgraded to warnings.

Step 2: Understand strict equality (=== and !==)

=== and !== compare both value and type, with no coercion – if the types don’t match, the comparison is false, full stop. This is the operator pairing you should reach for by default in TypeScript.

let age: number = 25;
let input: string = "25";

console.log(age === input); // false - number vs string
console.log(age === 25);    // true - same value, same type

TypeScript will actually flag age === input at compile time in many contexts, because it can see the types will never overlap. That’s the whole point: an error you’d only discover by testing in JavaScript becomes an error you see the moment you save the file.

Before/after: In plain JavaScript, age == input returns true because == coerces the string "25" into the number 25 before comparing. In TypeScript with ===, that comparison correctly returns false – and the compiler nudges you toward writing code that says what it means.

Step 3: Avoid loose equality (==) and know why it’s discouraged

The loose equality operator == performs implicit type coercion, which is precisely the behaviour TypeScript’s type system exists to protect you from. It’s a habit worth breaking early, because it undermines everything strict mode is trying to do.

// Avoid this
if (userInput == 0) {
  console.log("Treated as zero");
}

// Prefer this
if (userInput === 0) {
  console.log("Actually zero");
}

If you see a linter warning like Expected '===' and instead saw '==', it means your editor or tsconfig.json has caught a loose comparison – fix it by switching to === rather than suppressing the warning. That warning is doing its job.

Step 4: Use relational operators (<, >, <=, >=) with typed values

Relational operators compare ordering – which value is bigger, smaller, or equal – and TypeScript will stop you from using them on types where “bigger” doesn’t make sense. Numbers and strings support ordering comparisons; most objects don’t.

function isAdult(age: number): boolean {
  return age >= 18;
}

console.log(isAdult(20)); // true
console.log(isAdult(15)); // false

Because age is explicitly typed as number, TypeScript guarantees nobody can accidentally call isAdult("twenty") without a compiler error first. That guarantee is what lets you trust the function’s logic without re-checking its inputs every time you call it.

Step 5: Use comparisons as type guards for narrowing

A comparison expression doesn’t just return true or false – inside an if block, it can also tell the compiler more about a variable’s type. This is called type narrowing, and it’s where comparison literacy starts paying real dividends.

function describe(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript knows it's a string here
  } else {
    console.log(value.toFixed(2)); // TypeScript knows it's a number here
  }
}

The typeof value === "string" check is doing double duty. It’s a runtime comparison, and it’s also a signal the compiler uses to narrow value’s type within that branch. Once you’re comfortable with this pattern, you’ve got a genuine foothold into conditional types and discriminated unions – the kind of type-level thinking that shows up in larger, more structured codebases, much like how a well-typed Django or Laravel model gives you confidence about what shape your data takes before it hits the database. If you’re curious how that discipline plays out in a full-stack framework, our Python Django Full Stack Development guide covers a similar “trust the types, trust the flow” mindset.

Troubleshooting

“This comparison appears to be unintentional because the types have no overlap.” This means you’re comparing two values whose types TypeScript knows can never match – for example, a string against a number literal. Fix it by checking why the types differ; usually one value needs converting first, with Number() or String(), before comparing.

Comparisons silently passing when they shouldn’t. If a comparison isn’t behaving as expected and you’re not in strict mode, check your tsconfig.json for "strict": true. Without it, TypeScript falls back to more permissive JavaScript-like behaviour.

Comparing objects with === and getting unexpected false results. === on objects compares references, not contents – two objects with identical properties are still !== each other unless they’re the exact same reference. For deep comparison, you’ll need a dedicated utility rather than a raw operator.

Next steps

You now have the operator fluency that underpins nearly everything else in TypeScript: type narrowing, control flow, and safer conditionals. From here, a natural progression is interfaces and custom types, followed by generics and the wider tooling ecosystem (editor integration, linting, and the tsc compiler’s watch mode). If you’re building out a full project, it’s also worth seeing how typed front-end code pairs with a typed or structured back end – our Laravel 12 Complete Guide for Beginners is a good next stop if PHP is part of your stack.

If you’d rather have an experienced team set up your TypeScript project, tooling, and type-safety standards properly from day one, get in touch with DRS Web – we help teams build development foundations that actually hold up.

Frequently Asked Questions

Q: What’s the difference between === and == in TypeScript?
A: === compares both value and type with no coercion, while == performs implicit type coercion before comparing. TypeScript’s strict mode encourages === because it avoids the silent type conversions that cause bugs.

Q: Why does TypeScript care so much about comparison operators?
A: Comparisons interact directly with TypeScript’s type-checking and narrowing behaviour, so operator choice affects both runtime correctness and how much the compiler can verify at compile time.

Q: Can I use comparison operators to narrow types in TypeScript?
A: Yes. Constructs like typeof value === "string" inside an if block let TypeScript infer a more specific type for that variable within the block, which is the foundation of type narrowing.

Q: Do I need strict mode enabled to use === safely?
A: You can use === without strict mode, but strict mode makes TypeScript’s type checker far more rigorous about flagging comparisons between incompatible types, which is where most of the real safety benefit comes from.

Q: Is == ever acceptable in TypeScript?
A: It’s rarely necessary. The main practical case is comparing against null or undefined together with == null, since that catches both in one check – but for everyday value comparisons, === is the safer default.

Source: https://www.udemy.com/course/typescript-for-beginners/