Why advanced types are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using union types?

Consider this TypeScript code snippet that uses union types. What will be the output when calling formatValue with 42 and "hello"?

Typescript

function formatValue(value: number | string): string {
  if (typeof value === "number") {
    return `Number: ${value.toFixed(2)}`;
  } else {
    return `String: ${value.toUpperCase()}`;
  }
}

console.log(formatValue(42));
console.log(formatValue("hello"));

A

Number: 42.00
String: HELLO

B Error: toFixed is not a function

C

42.00
HELLO

D

Number: 42
String: hello

💡 Hint

Think about how union types allow different behaviors based on type checks.

The function checks the type of the input. If it's a number, it formats it with two decimals using toFixed(2). If it's a string, it converts it to uppercase. So the outputs are 'Number: 42.00' and 'String: HELLO'.

🧠 Conceptual

intermediate

Why use advanced types like intersection types in TypeScript?

Which of the following best explains why intersection types are useful in TypeScript?

A They let you choose one type from many possible types at runtime.

B They automatically convert types to strings for easier display.

C They prevent any type from being assigned to a variable.

D They allow combining multiple types into one, ensuring the value has all properties from each type.

💡 Hint

Think about how you can require an object to have properties from multiple types.

Intersection types combine multiple types so the resulting type has all properties from each. This is useful when you want to ensure an object meets multiple contracts at once.

🔧 Debug

advanced

What error does this TypeScript code raise?

Look at this code using conditional types. What error will TypeScript report?

Typescript

type IsString<T> = T extends string ? true : false;

let test1: IsString<number> = true;
let test2: IsString<string> = false;

A Type 'true' is not assignable to type 'false'.

B

Type 'true' is not assignable to type 'false'.
Type 'false' is not assignable to type 'true'.

C No error, code compiles fine.

D Type 'false' is not assignable to type 'true'.

💡 Hint

Check the expected types for test1 and test2 based on the conditional type.

For test1, IsString evaluates to false, but the code assigns true, causing 'Type 'true' is not assignable to type 'false'.'. For test2, IsString is true, and assigning false causes 'Type 'false' is not assignable to type 'true'.'. TypeScript reports both errors.

📝 Syntax

advanced

Which option correctly defines a mapped type in TypeScript?

You want to create a mapped type that makes all properties of a type optional. Which option is correct?

A type Partial<T> = { (P in keyof T)?: T[P] };

B type Partial<T> = { [P of keyof T]?: T[P] };

C type Partial<T> = { [P in keyof T]?: T[P] };

D type Partial<T> = { [P in T]?: T[P] };

💡 Hint

Remember the syntax for mapped types uses 'in' and square brackets.

Mapped types use the syntax {[P in keyof T]: ...}. Option C correctly uses this syntax with optional properties.

🚀 Application

expert

How many properties does the resulting type have?

Given these types and their intersection, how many properties does the type Combined have?

Typescript

type A = { x: number; y: string };
type B = { y: string; z: boolean };
type Combined = A & B;

A 3 properties: x, y, and z

B 2 properties: x and z only

C 4 properties: x, y, z, and an extra y

D 1 property: y only

💡 Hint

Intersection types combine all properties, but overlapping keys must be compatible.

The intersection type combines all properties from A and B. Both have 'y' of the same type string, so it merges as one property. So Combined has x, y, and z properties.