2. TypeScript Essentials: Types & Interfaces

Angular is built entirely on TypeScript, a superset of JavaScript that adds optional static typing. Mastering TypeScript is crucial for Angular development.

Basic Types

TypeScript introduces types that allow the compiler to check your code before runtime, catching errors early.

typescript // Explicit typing let courseName: string = "Angular Development"; let lessonCount: number = 80; let isCompleted: boolean = false;

// Array types let technologies: string[] = ['Angular', 'TypeScript', 'RxJS']; let scores: Array = [95, 88, 92];

// Special types let data: any; // Avoid 'any' if possible, defeats the purpose of TS let unknownValue: unknown; // Safer than 'any'

Interfaces

Interfaces define contracts for the shape of objects. They ensure that an object adheres to a specific structure.

typescript interface Student { id: number; name: string; email: string; isEnrolled: boolean; startDate?: Date; // Optional property }

// Implementing the interface const studentA: Student = { id: 101, name: "Alice Smith", email: "alice@example.com", isEnrolled: true };

// Type checking ensures that if we miss 'id', the compiler throws an error.

Interfaces are the primary way we define data models in Angular applications, ensuring consistency when fetching and manipulating data.