Learn TypeScript

Quiz

Quiz

Test your knowledge on type narrowing with this quiz.

1.

Consider the code below:

type Person = {
  name: string;
  address?: {
    line1: string;
    line2: string;
    state: string;
    zipcode: string;
  }
}
function validatePersonAddress(person: Person) {
  if (person.address === undefined) {
    throw 'Invalid address' 
  }
}
function logZipcode(person: Person) {
  validatePersonAddress(person);
  console.log(person.address.zipcode);
}

A type error is raised on the console.log statement because TypeScript thinks person.address could be undefined. How can we resolve this problem?

console.log(person.address!.zipcode);
console.log((person.address as any).zipcode);
2.

What is the type of level in the console.log statement below:

type Level = "low" | "medium" | "high";
function logLevel(level: Level) {
  if (level === "high") {
    console.warn(level);
  } 
}
3.

Consider the code below:

function convert(amount: number | string) {
  if (/* TODO: check if type is number */) {
    return amount;
  } else {
    return Number(amount);
  }
}

What type guard can we use to check amount is a number?

4.

Consider the code below:

class Dog {
  woff() {
    console.log("woff")
  }
}
class Cat {
  meow() {
    console.log("meow")
  }
}
function speak(animal: Dog | Cat) {
  if (/* TODO: check if type is Dog */) {
    animal.woff();
  } else {
    animal.meow();
  }
}

What type guards can we use to check animal is of type Dog?

5.

Consider the code below:

interface Product {
  name: string;
  price: number;
  getPrice: () => number;
}
interface DiscountedProduct {
  name: string;
  price: number;
  getPrice: () => number;
  getDiscountedPrice: () => number;
}
function getPrice(product: Product | DiscountedProduct) {
  if (isDiscountedProduct(product)) {
    return product.getDiscountedPrice();
  } else {
    return product.getPrice();
  }
}

What could an implementation of the isDiscountedProduct type guard function be?

function isDiscountedProduct(
product: Product | DiscountedProduct
): product is DiscountedProduct {
return product.price > 10;
}
function isDiscountedProduct(
product: Product | DiscountedProduct
): asserts product is DiscountedProduct {
return product.price > 10;
}
function isDiscountedProduct(
product: Product | DiscountedProduct
): asserts product is DiscountedProduct {
if (product.price <= 10) {
throw new Error("Not a discounted product");
}
}
6.

Consider the code below:

interface Product {
  name: string;
  price: number;
  getPrice: () => number;
}
interface DiscountedProduct {
  name: string;
  price: number;
  getPrice: () => number;
  getDiscountedPrice: () => number;
}
function getDiscountedPrice(product: Product | DiscountedProduct) {
  assertDiscountedProduct(product);
  return product.getDiscountedPrice();
}

What could an implementation of the assertDiscountedProduct type guard function be?

function assertDiscountedProduct(product: Product | DiscountedProduct): product is DiscountedProduct {
return product.price > 10;
}
function assertDiscountedProduct(product: Product | DiscountedProduct): asserts product is DiscountedProduct {
if (product.price <= 10) {
throw new Error("Not a discounted product");
};
}
7.

Consider the code below:

type Button =
  | { kind: "round"; renderIcon: () => void }
  | { kind: "normal"; renderText: () => void };
function render(button: Button) {
  if (button.kind === "round") {
    button.renderIcon();
  } else {
    button.renderText();
  }
}

Will a type error occur on the above code?

Prev

Understanding the discriminated union pattern

Next

Introduction

© 2023 Carl Rippon
Privacy Policy
This site uses cookies. Click here to find out more