TypeScript Type Annotations on Variables

Last Updated : 10 May, 2024

TypeScript is a statically typed superset of JavaScript that brings the benefits of strong typing to the JavaScript ecosystem. One of its key features is the ability to add type annotations to variables, which helps developers catch type-related errors at compile time rather than runtime. In this article, we will explore TypeScript type annotations on variables, covering their syntax, and various approaches, and providing code examples for each.

Syntax:

let variableName: type;

Where-

variableName is the name of the variable
type is the type you want to assign to it.

These are the following approaches to use Type Annotation in TypeScript:

Type Annotations with Primitives
Type Annotations with Arrays
Type Annotations with Objects

Type Annotation with Primitives

Type Annotations with Primitives in TypeScript involve explicitly specifying data types, such as numbers, strings, and booleans, for variables. This practice enhances code clarity and type safety by ensuring that variables can only store values conforming to their defined primitive types, thereby minimizing runtime errors.

Example:

JavaScript

let pincode: number = 628204;   let city: string = "Chennai";   let isAvailabe: boolean = true;   console.log(pincode);  console.log(city);  console.log(isAvailabe);

Output:

Type Annotations with Arrays

Type Annotations with Arrays in TypeScript refers to the practice of specifying the expected data type of elements within an array. This allows developers to create arrays that can only contain specific types of values, enhancing code reliability and readability while reducing the risk of type-related errors during development.

Example:

JavaScript

let num: number[] = [10, 20, 30, 40, 55, 75];   let city: string[] = ["Chennai",      "Gurugram", "Mumbai", "Hyderabad"];   console.log(num);  console.log(city);

Type Annotations with Objects

Type Annotations with Objects in TypeScript involve specifying the types of properties within an object. This approach ensures that objects adhere to a specific structure, preventing type-related errors and enhancing code maintainability.

Example: This TypeScript code defines a variable `person` with specific property types. It initializes `person` with values and logs its `name`, `age`, and `isAdmin` properties.

JavaScript

let person: {     name: string;     age: number;     isAdmin: boolean; } = {     name: "GFG",     age: 22,     isAdmin: false };  console.log(person.name); console.log(person.age); console.log(person.isAdmin);

Conclusion: TypeScript's type annotations on variables are a powerful tool that enhances code quality by catching type-related errors early in the development process. By providing clear and concise information about the types of variables, developers can write more robust and maintainable code. Whether you are working with primitive types, custom types, or complex data structures, TypeScript's type annotations can greatly improve your coding experience and contribute to more reliable software.