Parameters type in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of function with typed parameters

What is the output of this TypeScript code when calling greet('Alice', 3)?

Typescript

function greet(name: string, times: number): string {
  return `${name} `.repeat(times).trim();
}

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

A "Alice Alice Alice"

B "Alice3"

C "Alice Alice"

D "3 Alice"

💡 Hint

Look at how the repeat method works on strings.

The function repeats the string "Alice " three times, resulting in "Alice Alice Alice ". The trim() removes the trailing space, so the output is "Alice Alice Alice".

❓ Predict Output

intermediate

Type error with wrong parameter type

What error will TypeScript show for this code?

Typescript

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

multiply(5, '2');

A Type error: Argument of type 'string' is not assignable to parameter of type 'number'.

B Runtime error: Cannot multiply number and string.

C No error, output is 10.

D Syntax error: Missing semicolon.

💡 Hint

Check the types of arguments passed to the function.

The function expects both parameters to be numbers. Passing a string causes a compile-time type error in TypeScript.

🔧 Debug

advanced

Why does this function cause a type error?

Identify the cause of the type error in this code snippet.

Typescript

function formatDate(date: Date, format: string = 'YYYY-MM-DD'): string {
  return date.toLocaleDateString(format);
}

formatDate(new Date());

A The <code>Date</code> type is not imported.

B The function is missing a return type annotation.

C The <code>toLocaleDateString</code> method does not accept a string format parameter.

D The default parameter value is invalid syntax.

💡 Hint

Check the official signature of toLocaleDateString.

The toLocaleDateString method accepts optional locales and options objects, not a string format. Passing a string causes a type error.

📝 Syntax

advanced

Correct parameter type for callback function

Which option correctly types the parameter of this callback function?

Typescript

function processItems(items: string[], callback: (item: string) => void) {
  items.forEach(callback);
}

processItems(['a', 'b'], (item) => console.log(item));

A (item: number) => void

B (item: string) => void

C (item: any) => string

D (item) => number

💡 Hint

The array contains strings, so the callback parameter should match that type.

The callback receives each string item and returns nothing (void). Option B matches this signature exactly.

🚀 Application

expert

Determine the type of parameters in a generic function

Given this generic function, what is the type of parameter value when calling identity(42)?

Typescript

function identity<T>(value: T): T {
  return value;
}

const result = identity(42);

A unknown

B string

C any

D number

💡 Hint

TypeScript infers the type from the argument passed.

When calling identity(42), TypeScript infers T as number, so value is of type number.

Practice

1. What does specifying a parameter type in a TypeScript function do?
function greet(name: string) {}

easy

A. It tells the function what type of value to expect for that parameter.

B. It changes the return type of the function automatically.

C. It makes the parameter optional.

D. It converts the parameter to a string.

Solution

1. Step 1: Understand parameter type declaration

   In TypeScript, writing name: string means the function expects a string value for name.

2. Step 2: Effect of parameter type

   This helps catch errors if a different type is passed and makes the code clearer.

3. Final Answer:

   It tells the function what type of value to expect for that parameter. -> Option A

4. Quick Check:

   Parameter type = expected value type [OK]

Hint: Parameter types define expected input data [OK]

Common Mistakes:

• Thinking parameter type changes return type
• Assuming parameter becomes optional automatically
• Believing parameter type converts data

2. Which of the following is the correct way to declare a function parameter of type number in TypeScript?

easy

A. function add(x number) {}

B. function add(x: number) {}

C. function add(number x) {}

D. function add(x = number) {}

Solution

1. Step 1: Check TypeScript parameter syntax

   The correct syntax uses a colon between the parameter name and its type: x: number.

2. Step 2: Identify correct option

   function add(x: number) {} matches this syntax exactly, others have syntax errors.

3. Final Answer:

   function add(x: number) {} -> Option B

4. Quick Check:

   Parameter syntax = name: type [OK]

Hint: Use colon between parameter and type [OK]

Common Mistakes:

• Omitting colon between name and type
• Placing type before parameter name
• Using equals sign instead of colon

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

function multiply(a: number, b: number) {
  return a * b;
}
console.log(multiply(3, 4));

medium

A. 12

B. 34

C. undefined

D. Error: Type mismatch

Solution

1. Step 1: Understand function parameters and operation

   The function takes two numbers and returns their product.

2. Step 2: Calculate the output

   Calling multiply(3, 4) returns 3 * 4 = 12.

3. Final Answer:

   12 -> Option A

4. Quick Check:

   3 * 4 = 12 [OK]

Hint: Multiply parameters as numbers to get output [OK]

Common Mistakes:

• Concatenating numbers as strings
• Expecting error due to types
• Confusing return value with parameter list

4. Identify the error in this TypeScript function declaration:

function greet(name string) {
  console.log('Hello, ' + name);
}

medium

A. Parameter name cannot be 'name'.

B. Parameter type should be after the function name.

C. Function must return a value.

D. Missing colon between parameter name and type.

Solution

1. Step 1: Check parameter syntax

   The parameter declaration name string is missing a colon between name and string.

2. Step 2: Correct syntax

   It should be name: string to be valid TypeScript.

3. Final Answer:

   Missing colon between parameter name and type. -> Option D

4. Quick Check:

   Parameter syntax requires colon [OK]

Hint: Always put colon between parameter and type [OK]

Common Mistakes:

• Omitting colon in parameter type
• Thinking parameter type goes after function name
• Assuming function must return value

5. Given this function, which call will cause a TypeScript error due to parameter types?

function setFlag(flag: boolean) {
  return flag ? 'ON' : 'OFF';
}

hard

A. setFlag(true)

B. setFlag(false)

C. setFlag('true')

D. setFlag(Boolean(0))

Solution

1. Step 1: Check parameter type expected

   The function expects a boolean parameter.

2. Step 2: Analyze each call

   Calls with true, false, and Boolean(0) are booleans. Passing 'true' (a string) causes a type error.

3. Final Answer:

   setFlag('true') -> Option C

4. Quick Check:

   String passed instead of boolean causes error [OK]

Hint: Pass correct type, not string for boolean parameters [OK]

Common Mistakes:

• Passing string instead of boolean
• Confusing Boolean() constructor with string
• Assuming any truthy value is allowed