What is Type Annotations in TypeScript ?

Type annotations in TypeScript are used to explicitly specify the type of a variable, function parameter, or object property. This helps catch errors early, improves code readability, and ensures type safety.

Example:

const str: string = "GeeksforGeeks";
const num: number = 6;
const arr: (number | string)[] = 
    ["GFG", "TypeScript", 500, 20];

console.log(typeof str);
console.log(typeof num);
console.log(arr);

Output:

string
number
["GFG", "TypeScript", 500, 20]

In this example:

• str is assigned the type string, so it will only accept string values.
• num is a number type, ensuring it will only store numbers.
• arr is an array that can hold both number and string types.

Function with Type Annotations

Type annotations in functions let you specify the expected types of parameters and the return value. This improves readability, enforces correctness, and helps catch errors early.

Now let's understand this with the help of example:

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

Output

Hello, Alice!

• The greet function accepts a parameter name of type string and returns a string.
• This ensures that both the input and output are of the expected types, preventing type-related errors.

Object with Type Annotations

Type annotations for objects define the structure and types of properties the object must have. This ensures type safety and prevents invalid assignments.

Now let's understand this with the help of example:

const person: { name: string; age: number } = {
    name: "Alice",
    age: 30
};
console.log(person);  

Output:

{ name: 'Alice', age: 30 }

• The person object is explicitly typed to have a name of type string and an age of type number.
• This enforces the structure of the object, ensuring it adheres to the specified types.

Array with Type Annotations

Array type annotations explicitly specify the type of elements an array can hold. This helps catch errors and improves code readability.

Now let's understand this with the help of example:

const numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers);

Output

[1, 2, 3, 4, 5]

• The numbers array is annotated to contain only number elements.
• This prevents the inclusion of elements of other types, maintaining type safety.

Class with Type Annotations

Type annotations in classes define the types of properties and method parameters/returns, ensuring that objects of the class follow a consistent structure. This improves type safety and code clarity.

Now let's understand this with the help of example:

class Rectangle {
    width: number;
    height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    area(): number {
        return this.width * this.height;
    }
}
const rect = new Rectangle(5, 10);
console.log(rect); 
console.log(rect.area()); 

Output:

Rectangle { width: 5, height: 10 }
50

• The Rectangle class has width and height properties, both of type number.
• The area method returns a number, representing the area of the rectangle.