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

Using `typeof` to infer a type

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