Parameters type in Typescript - Mini Project: Build & Apply

Parameters type

📖 Scenario: You are creating a simple program to greet users with their names and ages.

🎯 Goal: Build a TypeScript function that takes parameters with specific types and prints a greeting message.

📋 What You'll Learn

Create a function with typed parameters

Use string and number types for parameters

Call the function with correct arguments

Print the greeting message

💡 Why This Matters

🌍 Real World

Functions with typed parameters help catch mistakes early and make code easier to understand in real projects.

💼 Career

Knowing how to use parameter types is essential for writing safe and clear TypeScript code in professional development.

1

Create a function with typed parameters

Create a function called greet that takes two parameters: name of type string and age of type number.

Typescript

// Your code here

Hint

Use the syntax function functionName(param1: type1, param2: type2) { } to define typed parameters.

2

Add a greeting message inside the function

Inside the greet function, create a variable called message that uses a template string to combine name and age into the text: Hello, my name is {name} and I am {age} years old.

Typescript

function greet(name: string, age: number) {
  // Create a variable called message with the greeting text
  // Your code here
}

Hint

Use backticks ` and ${variable} to create a template string.

3

Print the greeting message inside the function

Add a console.log statement inside the greet function to print the message variable.

Typescript

function greet(name: string, age: number) {
  const message = `Hello, my name is ${name} and I am ${age} years old.`;
  // Print the message variable
  // Your code here
}

Hint

Use console.log(variable) to print to the console.

4

Call the function with arguments

Call the greet function with the arguments "Alice" for name and 30 for age.

Typescript

function greet(name: string, age: number) {
  const message = `Hello, my name is ${name} and I am ${age} years old.`;
  console.log(message);
}

// Call the greet function with "Alice" and 30
// Your code here

Hint

Call the function by writing greet("Alice", 30);

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