Parameters type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a function parameter with type number.

Typescript

function add(a: [1]) { return a + 10; }

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using string type causes a type error when adding a number.

Using boolean is incorrect for numeric operations.

The parameter a must be of type number to add 10 correctly.

2fill in blank

medium

Complete the code to declare a function parameter with type string.

Typescript

function greet(name: [1]) { return `Hello, ${name}!`; }

Drag options to blanks, or click blank then click option'

Astring

Bobject

Cboolean

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean causes errors when concatenating strings.

The parameter name should be a string to use in the greeting message.

3fill in blank

hard

Fix the error in the function parameter type to accept an array of numbers.

Typescript

function sum(numbers: [1]) { return numbers.reduce((a, b) => a + b, 0); }

Drag options to blanks, or click blank then click option'

Anumber

Bstring[]

Cnumber[]

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number instead of number[] causes errors because a single number is expected, not an array.

The parameter numbers must be an array of numbers, written as number[].

4fill in blank

hard

Fill both blanks to declare a function with two parameters: a string and a boolean.

Typescript

function checkStatus(name: [1], isActive: [2]) { return `${name} is ${isActive ? 'active' : 'inactive'}`; }

Drag options to blanks, or click blank then click option'

Astring

Bboolean

Cnumber

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the types or using number instead of boolean.

The first parameter name is a string, and the second isActive is a boolean.

5fill in blank

hard

Fill all three blanks to declare a function with parameters: a string, a number, and an optional boolean.

Typescript

function createUser(name: [1], age: [2], isAdmin?: [3]) { return { name, age, isAdmin }; }

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the optional parameter syntax or using wrong types.

The parameters are name as string, age as number, and optional isAdmin as boolean.

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