171 - Type annotations (Javascript)

TypeScript – Type Annotations

Type annotations are a fundamental concept in TypeScript, allowing developers to specify the data type of a variable, function parameter, or return value. They play a crucial role in enhancing code clarity, maintainability, and error prevention. In this guide, we’ll explore type annotations and how to use them effectively in TypeScript.

1. Basic Type Annotations

The simplest form of type annotation specifies the data type for a variable. For example, you can declare a variable of type `string` like this:


let message: string = "Hello, TypeScript!";

With this annotation, TypeScript ensures that message always contains a string, preventing any unintended type changes or assignments.

2. Function Parameter Annotations

Type annotations are especially useful for function parameters, where they help ensure that the correct data types are passed. Here’s an example:


function greet(name: string, age: number): string {
  return `Hello, ${name}! You are ${age} years old.`;
}

In this function, name is expected to be a string, and age is expected to be a number. TypeScript will flag any violations of these types as errors.

3. Type Inference with Type Annotations

TypeScript has a feature called type inference that allows it to automatically determine the data type if you don’t explicitly annotate it. Here’s an example:


let message = "Hello, TypeScript!";
message = 42; // Error: Type 'number' is not assignable to type 'string'.

Type inference often reduces the need for explicit type annotations. Still, using annotations can be valuable for code clarity.

4. Object Type Annotations

Annotations can also be applied to object properties, specifying the expected types within an object. Consider the following example:


let person: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

In this case, the person object should have a name property of type string and an age property of type number.

5. Arrays and Type Annotations

Type annotations can be used with arrays, ensuring that they contain elements of a specific type:


let numbers: number[] = [1, 2, 3, 4, 5];

In this example, the numbers array is annotated as an array of numbers.

6. Annotations with Complex Types

Annotations are not limited to basic types; they can be used with more complex types as well. For instance, when working with objects:


let person: {
  name: string;
  address: {
    street: string;
    city: string;
  };
} = {
  name: "Bob",
  address: {
    street: "123 Main St",
    city: "Exampleville"
  }
};

This annotation describes an object with a name property of type string and an address property that itself is an object with street and city properties, both of type string.

7. Type Aliases

For more complex data types or to enhance code readability, TypeScript supports type aliases. They allow you to name and reuse custom types. For example:


type Person = {
  name: string;
  age: number;
};

let employee: Person = {
  name: "John",
  age: 28
};

In this case, Person is an alias for an object type with name and age properties. Type aliases make your code more concise and maintainable.

8. Union Types and Type Annotations

Type annotations can also define union types, which are versatile when a variable can have multiple data types. Here’s an example:


let result: string | number = "Success";
result = 42; // No error

With the annotation string | number, the result variable can store either a string or a number.

Conclusion

Type annotations are a powerful feature in TypeScript that contribute to code clarity, maintainability, and error prevention. They allow developers to specify data types for variables, function parameters, and object properties, making TypeScript a robust and reliable choice for web development.

171 – Type annotations (Javascript)