The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Type Annotations

Next ►
►

Type annotations in TypeScript allow you to explicitly specify the types of variables, function parameters, and return values. This helps catch errors early in the development process and makes your code more readable and maintainable.

Key Concepts

  1. Basic Type Annotations:

    • Variables: You can annotate variables with types.
    • Function Parameters: You can specify the types of function parameters.
    • Function Return Types: You can define the type of value a function returns.

  2. Common Types:

    • number
    • string
    • boolean
    • array
    • object
    • any
    • void
    • null and undefined

Basic Type Annotations

Variables

You can annotate variables with types using a colon followed by the type.

let age: number = 25;
let name: string = "John";
let isStudent: boolean = true;

Function Parameters

Annotate function parameters by specifying the type after the parameter name.

function greet(name: string): void {
    console.log("Hello, " + name);
}

Function Return Types

Specify the return type of a function after the parameter list.

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

Practical Examples

Example 1: Annotating Variables

let count: number = 10;
let message: string = "Welcome to TypeScript!";
let isActive: boolean = false;

Example 2: Annotating Function Parameters and Return Types

function multiply(x: number, y: number): number {
    return x * y;
}

let result: number = multiply(5, 10);
console.log(result); // Output: 50

Example 3: Annotating Arrays

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

Example 4: Annotating Objects

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

Exercises

Exercise 1: Annotate Variables

Annotate the following variables with appropriate types:

let productName = "Laptop";
let price = 999.99;
let inStock = true;

Solution:

let productName: string = "Laptop";
let price: number = 999.99;
let inStock: boolean = true;

Exercise 2: Annotate Function Parameters and Return Types

Annotate the following function parameters and return type:

function calculateTotal(price, quantity) {
    return price * quantity;
}

Solution:

function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

Exercise 3: Annotate Arrays and Objects

Annotate the following arrays and objects:

let fruits = ["Apple", "Banana", "Cherry"];
let car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

Solution:

let fruits: string[] = ["Apple", "Banana", "Cherry"];
let car: { make: string; model: string; year: number } = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

Common Mistakes and Tips

  • Mistake: Forgetting to annotate function return types.

    • Tip: Always specify the return type of functions to avoid unexpected results.

  • Mistake: Using any type excessively.

    • Tip: Use specific types whenever possible to leverage TypeScript's type-checking capabilities.

Conclusion

Type annotations are a fundamental feature of TypeScript that enhance code quality and maintainability. By explicitly specifying types for variables, function parameters, and return values, you can catch errors early and make your code more readable. Practice using type annotations in your projects to become proficient in TypeScript.

Next, we will explore how to compile TypeScript code in the "Compiling TypeScript" section.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved