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.

Practice

1. Why do we need advanced types in TypeScript?

easy

A. To avoid writing any type annotations

B. To make the code run faster at runtime

C. To describe complex data shapes clearly and catch errors early

D. To allow JavaScript code to run without changes

Solution

1. Step 1: Understand the purpose of advanced types

   Advanced types help describe complex data structures and relationships in code.

2. Step 2: Recognize their benefit in error checking

   They allow TypeScript to catch mistakes before running the code by checking data shapes.

3. Final Answer:

   To describe complex data shapes clearly and catch errors early -> Option C

4. Quick Check:

   Advanced types = clear data + early error catch [OK]

Hint: Advanced types describe complex data and catch errors early [OK]

Common Mistakes:

• Thinking advanced types speed up runtime
• Believing they remove the need for any types
• Confusing advanced types with JavaScript features

2. Which of the following is a correct way to define a union type in TypeScript?

easy

A. let value: string | number;

B. let value: string & number;

C. let value: string or number;

D. let value: string, number;

Solution

1. Step 1: Recall union type syntax

   Union types use the pipe symbol | to allow multiple types.

2. Step 2: Check each option

   let value: string | number; uses | correctly; B uses & which means intersection, not union; C and D use invalid syntax.

3. Final Answer:

   let value: string | number; -> Option A

4. Quick Check:

   Union type uses | symbol [OK]

Hint: Union types use | between types, not & or words [OK]

Common Mistakes:

• Using & instead of | for union types
• Writing 'or' instead of |
• Separating types with commas

3. What will be the output of this TypeScript code?

type Result = string | number;
function format(value: Result) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}
console.log(format(3.14159));

medium

A. "3.14"

B. "3.14" (number) with two decimals

C. "3.14159"

D. "3.14" (string) with two decimals

Solution

1. Step 1: Understand the function behavior

   If the input is a string, it converts to uppercase. Otherwise, it formats the number to 2 decimals using toFixed(2).

2. Step 2: Apply the function to 3.14159

   3.14159 is a number, so toFixed(2) returns the string "3.14" with two decimals.

3. Final Answer:

   "3.14" (string) with two decimals -> Option D

4. Quick Check:

   Number input uses toFixed(2) = "3.14" [OK]

Hint: Check type guards to predict output format [OK]

Common Mistakes:

• Thinking toFixed returns a number, not string
• Confusing string input with number input
• Ignoring type narrowing in if statement

4. Identify the error in this TypeScript code using advanced types:

type User = { name: string; age: number } | null;
function greet(user: User) {
  console.log("Hello, " + user.name.toUpperCase());
}

medium

A. user can be null, so accessing user.name causes an error

B. toUpperCase() is not a function on string

C. Missing return type in function greet

D. User type should not use union with null

Solution

1. Step 1: Analyze the User type

   User can be an object or null, so user might be null at runtime.

2. Step 2: Check the function usage

   Accessing user.name without checking if user is null causes a runtime error.

3. Final Answer:

   user can be null, so accessing user.name causes an error -> Option A

4. Quick Check:

   Null union requires null check before property access [OK]

Hint: Always check for null before accessing properties [OK]

Common Mistakes:

• Ignoring null possibility in union types
• Assuming string methods work on null
• Thinking missing return type causes error here

5. You have a function that accepts a parameter which can be either a string or an array of strings. You want to return a single string that joins all strings with commas. Which advanced type and code snippet correctly handles this?

hard

A. function joinStrings(input: string[]) { return input.toString(); }

B. function joinStrings(input: string | string[]) { return Array.isArray(input) ? input.join(",") : input; }

C. function joinStrings(input: string | string[]) { return input.join(","); }

D. function joinStrings(input: string & string[]) { return input.join(","); }

Solution

1. Step 1: Understand the parameter type

   The parameter can be a string or an array of strings, so union type string | string[] is correct.

2. Step 2: Handle both cases safely

   Use Array.isArray to check if input is array, then join with commas; else return the string as is.

3. Final Answer:

   function joinStrings(input: string | string[]) { return Array.isArray(input) ? input.join(",") : input; } -> Option B

4. Quick Check:

   Use union type + type guard for safe handling [OK]

Hint: Use union type and Array.isArray to handle both cases [OK]

Common Mistakes:

• Using intersection type & instead of union |
• Calling join on string without checking type
• Ignoring the string input case