Type annotation on function parameters in Typescript - Mini Project: Build & Apply

Type annotation on function parameters

📖 Scenario: You are building a simple calculator function that adds two numbers. To make your code clear and safe, you want to specify the types of the inputs.

🎯 Goal: Create a function called add that takes two numbers as parameters and returns their sum. Use type annotations on the function parameters.

📋 What You'll Learn

Create a function named add

Add type annotations to both parameters to specify they are numbers

Return the sum of the two parameters

💡 Why This Matters

🌍 Real World

Type annotations help catch mistakes early and make your code easier to understand, especially when working with others.

💼 Career

Many programming jobs require writing clear, typed code to reduce bugs and improve maintainability.

1

Create the function skeleton

Write a function called add that takes two parameters named a and b without any type annotations yet.

Typescript

function add(a, b) {
  // Your code here
}

Need a hint?

Start by writing the function name and parameters without types. Then return the sum of a and b.

2

Add type annotations to parameters

Add type annotations to the parameters a and b to specify they are both of type number.

Typescript

function add(a: number, b: number) {
  return a + b;
  // Your code here
}

Need a hint?

Use : number after each parameter name to add the type annotation.

3

Add a variable to hold the result

Inside the function add, create a variable called result of type number that stores the sum of a and b. Then return result.

Typescript

function add(a: number, b: number) {
  const result: number = a + b;
  // Your code here
  return result;
}

Need a hint?

Declare result with const and add the type : number. Then return it.

4

Test the function output

Write a console.log statement to call add(5, 7) and print the result.

Typescript

function add(a: number, b: number) {
  const result: number = a + b;
  return result;
}

// Your code here

Need a hint?

Use console.log(add(5, 7)) to see the sum printed.