TypeScript with Angular

TypeScript Is Not Optional in Angular

Unlike React or Vue, where TypeScript is an opt-in choice, Angular is written in and fundamentally built around TypeScript — every project the CLI generates uses it by default, and much of Angular's tooling (the Language Service, strict template checking) depends on it.

Decorators

You've used decorators throughout this course — @Component, @Injectable, @Input, @Directive, @Pipe — a TypeScript feature that attaches metadata to a class, property, or parameter, which Angular reads to understand how to treat that piece of code.

@Component({ selector: 'app-example', standalone: true, template: '' })
export class ExampleComponent {
  @Input() title = ''; // a property decorator
}

Interfaces for Data Shapes

Defining an interface for every data shape flowing through your app — API responses, component inputs — gives you autocomplete and compile-time checking throughout services, components, and templates.

export interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

getProducts() {
  return this.http.get<Product[]>('/api/products'); // fully typed response
}

Generics in Signals and HttpClient

Generics — the <T> syntax — appear throughout Angular's own APIs, and you've already been using them without necessarily naming the concept.

const products = signal<Product[]>([]);       // Signal<Product[]>
const user = input<User | null>(null);         // InputSignal<User | null>
this.http.get<Product[]>('/api/products');     // Observable<Product[]>

Strict Mode

Angular CLI projects enable TypeScript's strict mode by default, along with Angular-specific strict template type checking — catching a far wider range of mistakes (like a possibly-undefined value used unsafely) at build time.

// tsconfig.json (relevant excerpt)
{
  "compilerOptions": {
    "strict": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

FAQs

Summary

Decorators, interfaces, and generics are woven throughout Angular's own APIs, and strict mode is what makes its type safety guarantees meaningful in practice. Next, you'll look at testing an Angular application.