Parameter type annotations in Typescript

Introduction

Parameter type annotations help you tell the computer what kind of information a function expects. This makes your code clearer and helps catch mistakes early.

When writing a function that takes inputs and you want to be sure those inputs are the right kind.

When working with others and you want to make your code easier to understand.

When you want your code editor to help you by showing errors if you use the wrong input type.

When building bigger programs where keeping track of data types helps avoid bugs.

Syntax

Typescript

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

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

Common types include string, number, and boolean.

Examples

This function expects a string as the name.

Typescript

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

This function expects a number and returns its square.

Typescript

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

This function expects a number and returns a boolean.

Typescript

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

Sample Program

This program defines a function that multiplies two numbers. It uses parameter type annotations to ensure both inputs are numbers. 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

Type annotations do not change how the program runs; they help during coding and checking.

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

Summary

Parameter type annotations tell what kind of data a function expects.

They help catch mistakes and make code easier to understand.

Use a colon : after the parameter name followed by the type.

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