JS
TS

JavaScript to TypeScript

10 lessons

Progress0%
1Introduction to TypeScript2Basic Types3Arrays and Tuples4Function Types5Object Types6Interfaces7Union Types8Generics9Type Guards10Utility Types
All Mirror Courses
JS
TS
Type Guards
MirrorLesson 9 of 10
Lesson 9

Type Guards

Runtime type checking with compile-time benefits

Introduction

In this lesson, you'll learn about type guards in TypeScript. Coming from JavaScript, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
JS
From JavaScript:

In JavaScript, you're familiar with runtime type checking with compile-time benefits.

TS
In TypeScript:

TypeScript has its own approach to runtime type checking with compile-time benefits, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TS
TypeScript Example
// TypeScript type guards narrow types
function processValue(value: string | number[] | Date): string | number {
  if (typeof value === "string") {
    // value is string here
    return value.toUpperCase();
  }
  if (Array.isArray(value)) {
    // value is number[] here
    return value.length;
  }
  // value is Date here
  return value.toISOString();
}

Comparing to JavaScript

Here's how you might have written similar code in JavaScript:

JS
JavaScript (What you know)
// JavaScript runtime checks
function processValue(value) {
  if (typeof value === "string") {
    return value.toUpperCase();
  }
  if (Array.isArray(value)) {
    return value.length;
  }
  if (value instanceof Date) {
    return value.toISOString();
  }
}
Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

typeof narrows primitive types

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

instanceof narrows class instances

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Array.isArray() narrows to arrays

Mirror Card
JS
From JavaScript:

You may be used to different syntax or behavior.

TS
In TypeScript:

Custom type guards use 'is' keyword

Step-by-Step Breakdown

1. typeof Guards

The typeof operator narrows to primitive types.

TS
TypeScript
function double(value: string | number): string | number {
  if (typeof value === "string") {
    return value + value; // string concatenation
  }
  return value * 2; // number multiplication
}

2. Custom Type Guards

Create your own type guards with the 'is' keyword.

TS
TypeScript
interface Dog { bark(): void; }
interface Cat { meow(): void; }

function isDog(pet: Dog | Cat): pet is Dog {
  return (pet as Dog).bark !== undefined;
}

function speak(pet: Dog | Cat) {
  if (isDog(pet)) {
    pet.bark(); // TypeScript knows it's a Dog
  } else {
    pet.meow(); // TypeScript knows it's a Cat
  }
}
Rule of Thumb
Use 'in' operator for checking property existence: if ('bark' in pet) works as a type guard too.

Common Mistakes

When coming from JavaScript, developers often make these mistakes:

  • typeof narrows primitive types
  • instanceof narrows class instances
  • Array.isArray() narrows to arrays
Common Pitfall
Don't assume TypeScript works exactly like JavaScript. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • Type guards narrow union types at runtime
  • typeof, instanceof, Array.isArray are built-in guards
  • Custom guards use the 'is' return type
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your JavaScript code in TypeScript to practice these concepts.
PreviousNext