TypeScript Basics for Angular

# CHAPTER 4

TypeScript Basics for Angular #

1. Chapter Introduction #

2. Learning Objectives #

• Declare variables with explicit Types (string, number, boolean).

• Write functions with typed parameters and return types.

• Create structured Data Models using Interfaces.

• Understand Object-Oriented Classes and Constructors.

• Understand Access Modifiers (public, private).

3. Variables and Data Types #

// Strongly typed variables
let username: string = "Alice";
let age: number = 28;
let isActive: boolean = true;

// The compiler throws an error if you violate the type!
// age = "Thirty"; // ERROR: Type 'string' is not assignable to type 'number'.

Type Inference: You don't *always* have to write the type. If you assign a value immediately, TypeScript is smart enough to guess the type.

let city = "London"; // Inferred as string automatically

4. Typed Arrays #

let scores: number[] = [95, 88, 100];
let names: string[] = ["John", "Jane"];

// names.push(5); // ERROR: Cannot push a number into a string array.

5. Functions in TypeScript #

// (a is a number, b is a number) : returns a number
function addNumbers(a: number, b: number): number {
    return a + b;
}

// If a function returns nothing, its return type is 'void'
function logMessage(message: string): void {
    console.log(message);
}

6. Interfaces (Creating Custom Data Models) #

// Define the shape of a User
interface User {
    id: number;
    name: string;
    email: string;
    isAdmin?: boolean; // The '?' makes this property optional
}

// Enforce the Interface on an object
let currentUser: User = {
    id: 101,
    name: "Alice",
    email: "alice@example.com"
};

If you spell "email" wrong, or forget the "id", VS Code will immediately underline currentUser in red! This is the superpower of TypeScript.

7. Classes and Object-Oriented Programming #

class Product {
    // Properties
    title: string;
    price: number;

    // Constructor runs when the object is created
    constructor(title: string, price: number) {
        this.title = title;
        this.price = price;
    }

    // Method
    getDetails(): string {
        return `${this.title} costs $${this.price}`;
    }
}

// Instantiating the class
let laptop = new Product("MacBook", 1500);
console.log(laptop.getDetails());

8. Access Modifiers (public, private) #

• public (Default): Can be accessed from anywhere (including the HTML template).

• private: Can only be used inside the Class itself. The HTML template cannot see it!

class BankAccount {
    public accountHolder: string = "Alice";
    private balance: number = 5000; // Hidden from outside world!

    public deposit(amount: number): void {
        this.balance += amount;
    }
}

*(Note: Angular provides a massive shortcut. If you put public or private inside the constructor parameters, TypeScript automatically creates the properties and assigns them for you! We will see this constantly in Angular Services).*

9. Common Mistakes #

• Abusing the any type: If you don't know what type a variable is, you can label it as any. This turns off type-checking entirely. Writing let data: any = ... is considered terrible practice and defeats the purpose of using TypeScript.

• Forgetting this. in classes: In Java/C#, you can often access class properties directly. In TypeScript, you MUST prefix class properties with this. (e.g., this.balance = 5).

10. MCQs with Answers #

11. Interview Questions #

• Q: Explain what an Interface is in TypeScript and why it is useful when working with APIs. (Answer: Interfaces define strict contracts for data shapes. When an API returns a JSON object, an Interface guarantees that the developer accesses existing properties correctly, preventing "undefined" crashes).

• Q: What is the difference between public and private variables in an Angular Component class?

12. Summary #

13. Next Chapter Recommendation #