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.