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.

Practice

1.

What does a parameter type annotation in TypeScript do?

easy

A. It tells what kind of data a function expects for its parameters.

B. It runs the function automatically.

C. It changes the function's return type.

D. It removes the parameter from the function.

Solution

1. Step 1: Understand the purpose of parameter type annotations

   Parameter type annotations specify the expected data type for each function parameter.

2. Step 2: Identify what this means for the function

   This helps the programmer and the TypeScript compiler catch errors if wrong data types are used.

3. Final Answer:

   It tells what kind of data a function expects for its parameters. -> Option A

4. Quick Check:

   Parameter type annotation = tells expected data type [OK]

Hint: Parameter type annotations specify expected data types [OK]

Common Mistakes:

• Thinking it changes the function's return type
• Believing it runs the function automatically
• Confusing it with removing parameters

2.

Which of the following is the correct way to add a type annotation for a parameter named age that should be a number?

function checkAge(____) { return age > 18; }

easy

A. age-number

B. age: number

C. age = number

D. number age

Solution

1. Step 1: Recall TypeScript parameter syntax

   In TypeScript, the parameter name is followed by a colon and then the type.

2. Step 2: Match the syntax to the options

   Only age: number uses the correct syntax: age: number.

3. Final Answer:

   age: number -> Option B

4. Quick Check:

   Parameter name : type = correct syntax [OK]

Hint: Use colon after parameter name for type [OK]

Common Mistakes:

• Putting type before parameter name
• Using equals sign instead of colon
• Using hyphen instead of colon

3.

What will be the output of this TypeScript code?

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

medium

A. Type error at compile time

B. Hello, 42!

C. Hello, undefined!

D. Runtime error

Solution

1. Step 1: Check the parameter type annotation

   The function expects a string parameter named name.

2. Step 2: Analyze the argument passed

   The argument passed is a number 42, which does not match the expected string type.

3. Final Answer:

   Type error at compile time -> Option A

4. Quick Check:

   Passing wrong type causes compile-time error [OK]

Hint: Passing wrong type causes compile-time error [OK]

Common Mistakes:

• Thinking it prints 'Hello, 42!' anyway
• Expecting a runtime error instead of compile-time
• Assuming undefined is printed

4.

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

function multiply(x: number, y) { return x * y; }

medium

A. Remove type annotation from x

B. Change y to y: string

C. Add type annotation to y: y: number

D. Add return type annotation

Solution

1. Step 1: Check parameter annotations

   Parameter x has a type number, but y has no type annotation.

2. Step 2: Understand TypeScript's requirement

   All parameters should have type annotations for clarity and type safety.

3. Final Answer:

   Add type annotation to y: y: number -> Option C

4. Quick Check:

   All parameters need type annotations [OK]

Hint: Annotate all parameters with types [OK]

Common Mistakes:

• Leaving some parameters untyped
• Changing unrelated parameter types
• Thinking return type annotation fixes parameter error

5.

You want to write a function formatPrice that takes a price parameter which can be either a number or a string. How should you annotate the parameter to accept both types?

hard

A. price: number, string

B. price: number & string

C. price: any

D. price: number | string

Solution

1. Step 1: Understand union types in TypeScript

   To accept multiple types, use the union operator | between types.

2. Step 2: Apply union type to parameter

   Use price: number | string to allow either type.

3. Final Answer:

   price: number | string -> Option D

4. Quick Check:

   Use | for multiple allowed types [OK]

Hint: Use pipe | to allow multiple types [OK]

Common Mistakes:

• Using & instead of | for union types
• Using comma-separated types
• Using any which loses type safety