Using `typeof`

function padLeft(value: string, padding: number | string) {
  if (typeof padding === 'number') {
    return Array(padding + 1).join(' ') + value;
  }
  if (typeof padding === 'string') {
    return padding + value;
  }
  throw new Error(`Expected number or string, got '${padding}'.`);
}

padLeft('Hello world', 4);     // '    Hello world'
padLeft('Hello world', '  ');  // '  Hello world'
padLeft('Hello world', '---'); // '---Hello world'

Using `instanceof`

class Cat {
  meow() {
    console.log('meow');
  }
}

class Dog {
  bark() {
    console.log('woof');
  }
}

type Animal = Cat | Dog;

function speak(animal: Animal) {
  if (animal instanceof Cat) {
    animal.meow();
  }
  if (animal instanceof Dog) {
    animal.bark();
  }
}

speak(new Cat());
speak(new Dog());

Using `in`

type Square = {
  size: number,
};

type Rectangle = {
  width: number,
  height: number,
};

type Shape = Square | Rectangle;

function area(shape: Shape) {
  if ('size' in shape) {
    return shape.size * shape.size;
  }
  if ('width' in shape) {
    return shape.width * shape.height;
  }
}

area({ size: 2 });             // 4
area({ width: 2, height: 3 }); // 6

Transcript

00:00

This is the pad left function that we previously saw in our lesson on union types. Now, the padding parameter for this function can be a string or a number allowing us to pad with a number of spaces or any given string. Now, within the function body, we are using the JavaScript type of operator to determine if the padding is a number or a string. Outside of these conditional blocks, the padding parameter can be a number or a string. Now, within these conditional blocks, TypeScript understands that if this condition is true,

00:34

when within the condition body, the padding parameter must be a number. And if you hover over the padding parameter, you can see that it is inferred to be a number within this block. The same is true for the other block. If the type of padding is a string and within the conditional block, the padding parameter will be narrowed down to the string type. Now, the JavaScript type of operator is one of the ways in which you can narrow down a union type into one of its primitive members. Now, this is perfectly fine if the union type

01:07

that you are looking at consists of primitive members like number or string. For anything else that is not a JavaScript primitive type, the type of operator actually returns the string object and therefore cannot be used to discriminate between the members. Now let's look at how we can narrow between instances of different JavaScript classes. With an example here we have a simple JavaScript class called CAT with a single method called Meow. We also have another Java strip class called dog with a single method called bark. We can capture instances of a cat

01:41

or a dog in a single type union called animal. Now we want to create this utility method called speak, which can accept any animal, and if it is a cat, it should meow, and if it is a dog, it should bark. Now, as mentioned before, we cannot use the type of operator because it'll be the string object for instances of either a cat or a dog. Now, the proper way to determine if a given object is an instance of a class is using the JavaScript instance of operator. So we check if the past in animal is an instance of a cat,

02:14

and if so, we invoke the method male. Otherwise, if it is an instance of a dog, we invoke the method bark. Now, just like the type of operator, TypeScript understands the instance of operator and understands that if this condition is true, then within the condition body animal will be a cat. And similarly, if the second condition is true, then the animal will be a dog. Now that's it for classes, but what about objects that are not created by calling a constructor of a particular class? Let's discuss those with another example. Here we have a type representing a square

02:49

with a single member called size to represent the squares width as well as its height. Then we have this type called rectangle with separate members to represent the rectangles Width and height. Now we can capture instances of a square or a rectangle in a single type union called shape. This allows us to create a utility function called area that can operate on any given shape. So if you pass in a square with a single size value of two, it should return the area four, and if you pass in a rectangle with a width of two and a height of three, it should return the area

03:22

of the rectangle, which would be six. Now, as you mentioned before, the type of operator for both of these objects would be the string object and would not help us differentiate between a square and a rectangle. Additionally, since these instances are not created by classes, we cannot use the JavaScript instance of operator to differentiate between the two objects. Fortunately, we can use the JavaScript in operator to determine if a particular property exists on the past and object and types. Script will automatically infer that if this property is present on the object,

03:55

then it must be of that particular type. So if the size property is found on the shape and this condition turns out to be true, TypeScript infers that shape must be a square. Similarly, if the width property is found on the past and shape, TypeScript infers, that shape must be a rectangle and will allow us to use the width and the height property with complete compile time type safety.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Type Narrowing

Subscription Required

Using `typeof`

Using `instanceof`

Using `in`

Transcript

Professional TypeScript Masterclass

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

Type Narrowing

Subscription Required

Using typeof

Using instanceof

Using in

Transcript

Professional TypeScript Masterclass

Using `typeof`

Using `instanceof`

Using `in`