TypeScript Type Annotations

Type annotations in TypeScript allow developers to explicitly specify the type of a variable, function parameter, or return value. This helps ensure type safety and provides better code clarity.

 

Why Use Type Annotations?

• To catch errors during development.
• To make the code more readable and maintainable.
• To ensure consistency in larger projects.

Variable Type Annotations

You can annotate a variable's type using a colon (:) followed by the type.

let age: number = 25;  
let name: string = "TypeScript";  
let isValid: boolean = true;  

console.log(age, name, isValid);  

If you try to assign a value of a different type, TypeScript will throw an error.

let count: number = 10;  
count = "Hello"; // Error: Type 'string' is not assignable to type 'number'

Function Type Annotations

You can annotate the types of function parameters and the return value.

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

let sum = add(10, 20);  
console.log(sum); // Output: 30

If the function does not return any value, annotate it with void.

function logMessage(message: string): void {  
  console.log(message);  
}  

logMessage("Hello, TypeScript!");

Array Type Annotations

You can annotate arrays using the type of the elements followed by [].

let numbers: number[] = [1, 2, 3, 4];  
let names: string[] = ["Alice", "Bob", "Charlie"];  

numbers.push(5);  // Valid  
names.push("David"); // Valid  

// Invalid assignment  
numbers.push("Hello"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

Object Type Annotations

For objects, you can specify the types of individual properties.

let person: {  
  name: string;  
  age: number;  
  isStudent: boolean;  
} = {  
  name: "John",  
  age: 25,  
  isStudent: true  
};  

console.log(person.name, person.age);

Union Type Annotations

Union types allow a variable to hold more than one type of value. Use the | symbol to define union types.

let id: string | number;  

id = "123";  // Valid  
id = 123;    // Valid  
id = true;   // Error: Type 'boolean' is not assignable to type 'string | number'

Type Annotations with any

The any type allows a variable to hold values of any type. This disables type checking.

let randomValue: any = 10;  
randomValue = "Hello";  
randomValue = true;  

console.log(randomValue); // Output: true

Optional Parameters

In functions, you can mark parameters as optional using ?.

function greet(name: string, age?: number): void {  
  console.log(`Hello, ${name}`);  
  if (age) {  
    console.log(`You are ${age} years old.`);  
  }  
}  

greet("John");  
greet("Alice", 30);

 

Summary

Type annotations in TypeScript enable developers to explicitly declare variable, function, and object types. This improves type safety, reduces runtime errors, and enhances code readability. While TypeScript can infer types, annotations are useful for clarity and precision in larger codebases.