Type annotation on function parameters in Typescript

Introduction

Type annotations help you tell the computer what kind of information a function expects. This makes your code safer and easier to understand.

When you want to make sure a function only gets numbers as input.

When you want to explain what type of data a function should receive to your team.

When you want to catch mistakes early by checking input types before running the program.

When you want your code editor to give helpful suggestions while you write functions.

When you want to avoid bugs caused by wrong data types being passed to functions.

Syntax

Typescript

function functionName(parameterName: type) {
  // function body
}

The colon : after the parameter name is used to add the type.

You can use many types like string, number, boolean, or even custom types.

Examples

This function expects a string called name. It prints a greeting.

Typescript

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

This function expects a number called num and returns its square.

Typescript

function square(num: number) {
  return num * num;
}

This function expects a number and returns a boolean telling if the age is 18 or more.

Typescript

function isAdult(age: number): boolean {
  return age >= 18;
}

Sample Program

This program defines a function that multiplies two numbers. It uses type annotations to make sure both inputs are numbers and the output is also a number. Then it calls the function and prints the result.

Typescript

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

const result = multiply(4, 5);
console.log(`4 times 5 is ${result}`);

Important Notes

If you pass the wrong type, TypeScript will show an error before running the code.

Type annotations do not change how the program runs; they help you catch mistakes early.

You can add types to return values too, after the parentheses.

Summary

Type annotations tell what kind of data a function expects.

They help catch errors and make code easier to read.

Use a colon : after the parameter name to add a type.

Practice

1. What does the type annotation in the function parameter function greet(name: string) tell us?

easy

A. The function expects name to be a string.

B. The function will return a string.

C. The function does not accept any parameters.

D. The function expects name to be a number.

Solution

1. Step 1: Understand the syntax of type annotation

   The colon : after name means we are telling TypeScript what type name should be.

2. Step 2: Identify the type specified

   The type specified is string, so name must be a string.

3. Final Answer:

   The function expects name to be a string. -> Option A

4. Quick Check:

   Parameter type annotation = string [OK]

Hint: Look for colon after parameter name to find its type [OK]

Common Mistakes:

• Confusing parameter type with return type
• Ignoring the colon and thinking it's optional
• Assuming no parameters are accepted

2. Which of the following is the correct way to add a type annotation for a number parameter age in a TypeScript function?

easy

A. function setAge(age = number) {}

B. function setAge(age: number) {}

C. function setAge(number age) {}

D. function setAge(age) : number {}

Solution

1. Step 1: Recall correct syntax for parameter type annotation

   TypeScript uses a colon : after the parameter name to specify its type.

2. Step 2: Check each option

   function setAge(age: number) {} uses age: number, which is correct. Others use invalid syntax.

3. Final Answer:

   function setAge(age: number) {} -> Option B

4. Quick Check:

   Parameter type syntax = colon after name [OK]

Hint: Use colon after parameter name for type [OK]

Common Mistakes:

• Using equals sign instead of colon for type
• Placing type before parameter name
• Adding colon after parentheses instead of parameter

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

function multiply(x: number, y: number): number {
  return x * y;
}

console.log(multiply(3, 4));

medium

A. 34

B. Error: Missing return type

C. undefined

D. 12

Solution

1. Step 1: Understand function parameters and return

   The function takes two numbers and returns their product.

2. Step 2: Calculate multiply(3, 4)

   3 times 4 equals 12, so the function returns 12.

3. Final Answer:

   12 -> Option D

4. Quick Check:

   3 * 4 = 12 [OK]

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

Common Mistakes:

• Confusing string concatenation with multiplication
• Ignoring return type annotation
• Expecting error due to missing type

4. Identify the error in this TypeScript function:

function greet(name string) {
  return `Hello, ${name}`;
}

medium

A. Incorrect use of backticks for string

B. Missing return type annotation

C. Missing colon between parameter name and type

D. Parameter name cannot be 'name'

Solution

1. Step 1: Check parameter syntax

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

2. Step 2: Confirm other parts are correct

   Backticks and parameter name are valid; return type annotation is optional.

3. Final Answer:

   Missing colon between parameter name and type -> Option C

4. Quick Check:

   Parameter type needs colon [OK]

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

Common Mistakes:

• Omitting colon between parameter and type
• Thinking return type is mandatory
• Confusing string quotes with backticks

5. You want to write a function formatPrice that takes a number price and returns a string with a dollar sign. Which is the correct way to add type annotations to the parameter and return type?

hard

A. function formatPrice(price: number): string { return `$${price}`; }

B. function formatPrice(price): string { return `$${price}`; }

C. function formatPrice(price: string): number { return `$${price}`; }

D. function formatPrice(price: number) { return price; }

Solution

1. Step 1: Determine parameter type

   The parameter price should be a number because it represents a price value.

2. Step 2: Determine return type

   The function returns a string with a dollar sign, so return type is string.

3. Step 3: Check options

   function formatPrice(price: number): string { return `$${price}`; } correctly annotates price: number and return type : string. Others have missing or wrong types.

4. Final Answer:

   function formatPrice(price: number): string { return `$${price}`; } -> Option A

5. Quick Check:

   Parameter number, return string [OK]

Hint: Parameter type matches input, return type matches output [OK]

Common Mistakes:

• Omitting parameter type
• Wrong return type annotation
• Returning wrong data type