Leer Type Narrowing | Type Inference and Advanced Type Safety

TypeScript uses type narrowing to help you write safer code when working with values that could be more than one type. Type narrowing means TypeScript automatically figures out a more specific type for a variable based on how you check it in your code. This allows you to use properties or methods that only exist on that specific type, without TypeScript raising errors.


              12345678910111213141516171819202122232425262728293031
            
function printValue(value: string | number) {
  if (typeof value === "string") {
    // TypeScript knows value is a string here
    console.log("String value: " + value.toUpperCase());
  } else {
    // TypeScript knows value is a number here
    console.log("Number value: " + (value + 10));
  }
}

class Animal {
  speak() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    // TypeScript knows animal is a Dog here
    animal.bark();
  } else {
    // TypeScript knows animal is an Animal, but not a Dog
    animal.speak();
  }
}

One of the most common ways TypeScript narrows types is by using the typeof operator. In the printValue function above, the parameter value can be a string or a number. Inside the if (typeof value === "string") block, TypeScript knows that value must be a string, so you can safely call string methods like toUpperCase(). In the else block, TypeScript knows that value can only be a number, so you can perform number operations.

Another way TypeScript narrows types is with the instanceof operator, which checks if an object was created from a specific class. In the makeSound function, the parameter animal could be an Animal or a Dog. When you write if (animal instanceof Dog), TypeScript understands that inside this block, animal is a Dog, so you can call the bark() method. Otherwise, TypeScript treats animal as a generic Animal, and you can only call methods defined on Animal.

By using these type guards, you can write code that is both flexible and type-safe, allowing TypeScript to help you avoid mistakes when working with union types or class hierarchies.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you explain more ways to narrow types in TypeScript?

What are some common mistakes when using type narrowing?

Can you show how type narrowing works with custom type guards?

Awesome!

Completion rate improved to 8.33

Veeg om het menu te tonen


              12345678910111213141516171819202122232425262728293031
            
function printValue(value: string | number) {
  if (typeof value === "string") {
    // TypeScript knows value is a string here
    console.log("String value: " + value.toUpperCase());
  } else {
    // TypeScript knows value is a number here
    console.log("Number value: " + (value + 10));
  }
}

class Animal {
  speak() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    // TypeScript knows animal is a Dog here
    animal.bark();
  } else {
    // TypeScript knows animal is an Animal, but not a Dog
    animal.speak();
  }
}

By using these type guards, you can write code that is both flexible and type-safe, allowing TypeScript to help you avoid mistakes when working with union types or class hierarchies.

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2