Parameter type annotations in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of a function with parameter type annotations

What is the output of this TypeScript code 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 how the parameter name is typed and how the function returns a string.

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

❓ Predict Output

intermediate

Effect of wrong parameter type annotation

What happens when you call square('5') with this function?

Typescript

function square(num: number): number {
  return num * num;
}

console.log(square('5' as any));

A 25

B TypeError at runtime

C Compilation error due to wrong argument type

D NaN

💡 Hint

The argument is forced to any type, so the function runs but with a string.

The string '5' is coerced to number 5 during multiplication, so the output is 25.

🔧 Debug

advanced

Identify the error in parameter type annotation

What error does this TypeScript code produce?

Typescript

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

A No error, code runs fine

B TypeError: Cannot add number and string

C Type 'string' is not assignable to type 'number' in return statement

D SyntaxError: Missing colon after parameter

💡 Hint

Check the return type and the expression inside the function.

The function promises to return a number but tries to add a number and a string, resulting in a string. This conflicts with the return type.

📝 Syntax

advanced

Correct parameter type annotation syntax

Which option shows the correct way to annotate a function parameter as an optional string in TypeScript?

A function greet(?name: string) {}

B function greet(name: optional string) {}

C function greet(name: string?) {}

D function greet(name?: string) {}

💡 Hint

Optional parameters use a question mark after the parameter name.

In TypeScript, optional parameters are marked with a question mark after the parameter name, like name?: string.

🚀 Application

expert

Determine the type of parameter in a complex function

Given this function, what is the type of the parameter callback?

Typescript

function processData(callback: (data: string, count: number) => boolean): void {
  const result = callback('test', 3);
  console.log(result);
}

A A function that takes a string and a number and returns a boolean

B A function that takes a boolean and returns a string and number

C A boolean value

D A string and number tuple

💡 Hint

Look at the arrow function type annotation inside the parameter.

The parameter callback is a function that accepts a string and a number and returns a boolean.