Parameter type annotations in Typescript - Mini Project: Build & Apply

Parameter Type Annotations in TypeScript

📖 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 with type annotations and returns their sum.

📋 What You'll Learn

Create a function named add with two parameters: a and b.

Add type annotations to both parameters to specify they are numbers.

Return the sum of a and b.

Call the add function with arguments 5 and 7 and print the result.

💡 Why This Matters

🌍 Real World

Type annotations are used in real projects to make code easier to understand and safer by preventing wrong types from being used.

💼 Career

Many programming jobs require writing TypeScript with proper type annotations to maintain large codebases and reduce bugs.

1

Create the add function with parameters

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

Typescript

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

Hint

Start by writing a function with two parameters. Don't add types yet.

2

Add type annotations to parameters

Modify the add function to add type annotations : number to both parameters a and b.

Typescript

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

Hint

Use : number after each parameter name to specify the type.

3

Call the add function with numbers

Call the add function with arguments 5 and 7 and store the result in a variable named result.

Typescript

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

const result = add(5, 7);
// Your code here

Hint

Use const result = add(5, 7); to call the function and save the output.

4

Print the result

Write a console.log statement to print the value of the variable result.

Typescript

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

const result = add(5, 7);

console.log(result);
// Your code here

Hint

Use console.log(result); to show the sum in the console.

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