Angular TypeScript Essentials

What is TypeScript Essentials in Angular?

Angular is written in TypeScript and expects you to use it. The features you need constantly are interfaces, type annotations, access modifiers, generics, and the decorator syntax the framework is built on.

TypeScript Essentials example

export interface Job {
  id: string;
  title: string;
  stipend?: number;          // optional
  tags: string[];
  readonly postedAt: Date;
}

export class JobService {
  private jobs: Job[] = [];                    // access modifier

  constructor(private http: HttpClient) {}     // parameter property + DI

  getAll(): Observable<Job[]> {                // generic return type
    return this.http.get<Job[]>('/api/jobs');
  }
}

How this works

Declaring constructor(private http: HttpClient) both injects the dependency and creates this.http in one line — a TypeScript feature Angular relies on heavily.

Key points to remember

• Interfaces describe API responses and give autocomplete throughout the app.
• The strict flag is on by default in new projects; embrace it rather than disabling it.
• Use the definite assignment assertion (!) for @Input properties Angular sets later.
• Union types model states cleanly: type Status = "idle" | "loading" | "error".

Common mistakes with TypeScript Essentials

• Sprinkling any to silence errors, which removes the benefit entirely.
• Fighting strictNullChecks instead of handling the null case.