Why typed functions matter in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this typed function?

Consider this TypeScript function with explicit types. What will be printed when calling greet('Alice')?

Typescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('Alice'));

A Hello, undefined!

B Hello, Alice!

C TypeError at runtime

D Compilation error due to missing return type

💡 Hint

Look at the function return type and how the argument is used.

The function greet takes a string and returns a greeting string. The call greet('Alice') returns 'Hello, Alice!'.

🧠 Conceptual

intermediate

Why do typed functions help catch errors early?

Which of these best explains why typed functions are useful in TypeScript?

A They help catch mistakes before running the code by checking types.

B They automatically fix bugs in the code.

C They allow the program to run faster at runtime.

D They make the code shorter and harder to read.

💡 Hint

Think about when type errors are found.

Typed functions let TypeScript check if the right types are used before running the program, catching errors early.

🔧 Debug

advanced

What error does this typed function cause?

Look at this TypeScript function. What error will the compiler show?

Typescript

function add(a: number, b: number): number {
  return a + b + '5';
}

A No error, returns a string

B TypeError at runtime

C Compilation error: Type 'string' is not assignable to type 'number'

D Compilation error: Missing return statement

💡 Hint

Check the return type and what is being returned.

The function is declared to return a number but returns a number plus a string, which results in a string. TypeScript flags this as a type error.

📝 Syntax

advanced

Which typed function syntax is correct?

Which option shows a correct TypeScript function with typed parameters and return type?

A function multiply(a: number, b: number): string { return a * b; }

B function multiply(a, b): number { return a * b; }

C function multiply(a: number, b: number) { return a * b; }

D function multiply(a: number, b: number): number { return a * b; }

💡 Hint

Check parameter and return type annotations.

Option D correctly types both parameters and the return value as numbers.

🚀 Application

expert

What is the output of this typed function using union types?

What will this TypeScript function print when called with formatId(123) and formatId('abc')?

Typescript

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `ID-${id.toFixed(0)}`;
  } else {
    return `ID-${id.toUpperCase()}`;
  }
}

console.log(formatId(123));
console.log(formatId('abc'));

A

ID-123
ID-ABC

B

ID-123.0
ID-abc

C TypeError at runtime

D Compilation error due to union type

💡 Hint

Look at how the function handles number and string types differently.

The function checks the type of id. For number, it formats without decimals. For string, it converts to uppercase.

Practice

1. Why is it important to specify types for function parameters and return values in TypeScript?

easy

A. It helps catch errors early by ensuring correct input and output types.

B. It makes the code run faster at runtime.

C. It allows functions to run without any input.

D. It automatically fixes bugs in the code.

Solution

1. Step 1: Understand the role of typed functions

   Typed functions define what types of inputs they accept and what type they return, helping the developer know how to use them correctly.

2. Step 2: Recognize the benefit of early error detection

   By specifying types, TypeScript can catch mistakes before running the code, preventing bugs caused by wrong data types.

3. Final Answer:

   It helps catch errors early by ensuring correct input and output types. -> Option A

4. Quick Check:

   Typed functions = early error detection [OK]

Hint: Typed functions catch type mistakes before running code [OK]

Common Mistakes:

• Thinking types speed up runtime
• Believing typed functions fix bugs automatically
• Assuming functions don't need inputs

2. Which of the following is the correct way to type a function in TypeScript that takes a number and returns a string?

easy

A. function convert(num: number) { return num.toString(); }

B. function convert(num: number): string { return num.toString(); }

C. function convert(num: string): number { return num.length; }

D. function convert(num): string { return num.toString(); }

Solution

1. Step 1: Check parameter and return types

   The function should accept a number parameter and return a string, so the parameter must be typed as number and the return type as string.

2. Step 2: Identify the correct syntax

   function convert(num: number): string { return num.toString(); } correctly types the parameter as number and the return type as string. function convert(num): string { return num.toString(); } misses parameter type, C swaps types, and A misses return type.

3. Final Answer:

   function convert(num: number): string { return num.toString(); } -> Option B

4. Quick Check:

   Parameter: number, Return: string = function convert(num: number): string { return num.toString(); } [OK]

Hint: Parameter and return types must match function purpose [OK]

Common Mistakes:

• Omitting parameter types
• Swapping parameter and return types
• Not specifying return type

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

function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, 10);
console.log(result);

medium

A. 15

B. 510

C. undefined

D. Error: Type mismatch

Solution

1. Step 1: Analyze function parameters and return

   The function add takes two numbers and returns their sum as a number.

2. Step 2: Calculate the result of add(5, 10)

   Adding 5 and 10 gives 15, so result is 15 and console.log prints 15.

3. Final Answer:

   15 -> Option A

4. Quick Check:

   5 + 10 = 15 [OK]

Hint: Add numbers to get sum, not string concat [OK]

Common Mistakes:

• Thinking numbers concatenate as strings
• Expecting undefined return
• Assuming type error without mismatch

4. Identify the error in this TypeScript function and choose the fix:

function greet(name: string): string {
  return 'Hello, ' + name;
}

greet(42);

medium

A. Remove the return type to fix the error.

B. Change function parameter to number: greet(name: number).

C. No error, code runs fine.

D. Change greet(42) to greet('42') to match string parameter.

Solution

1. Step 1: Check function parameter type

   The function expects a string parameter named name.

2. Step 2: Identify the call with wrong argument type

   The call greet(42) passes a number, which conflicts with the string type.

3. Step 3: Fix the call to match expected type

   Changing greet(42) to greet('42') passes a string, fixing the type mismatch.

4. Final Answer:

   Change greet(42) to greet('42') to match string parameter. -> Option D

5. Quick Check:

   Parameter type mismatch fixed by passing string [OK]

Hint: Match argument types to parameter types exactly [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Removing return type instead of fixing input
• Changing parameter type without reason

5. You want a function that accepts either a string or number and returns a string describing the input type. Which typed function is correct?

hard

A. function describe(input: any): string {
return `Input: ${input}`;
}

B. function describe(input: string): string {
return `String: ${input}`;
}

C. function describe(input: string | number): string {
if (typeof input === 'string') return `String: ${input}`;
else return `Number: ${input}`;
}

D. function describe(input: number): string {
return `Number: ${input}`;
}

Solution

1. Step 1: Understand the input types needed

   The function must accept either string or number, so union type string | number is required.

2. Step 2: Check function logic and typing

   function describe(input: string | number): string { if (typeof input === 'string') return `String: ${input}`; else return `Number: ${input}`; } uses union type and checks input type to return correct description. Options C and D accept only one type, A uses any which loses type safety.

3. Final Answer:

   function describe(input: string | number): string { if (typeof input === 'string') return `String: ${input}`; else return `Number: ${input}`; } -> Option C

4. Quick Check:

   Union type with type check = function describe(input: string | number): string { if (typeof input === 'string') return `String: ${input}`; else return `Number: ${input}`; } [OK]

Hint: Use union types and type checks for multiple input types [OK]

Common Mistakes:

• Using any type losing safety
• Accepting only one type instead of both
• Not checking input type before returning