TypeScript Essentials for Angular

This section documents modern, standalone Angular — signals, the built-in @if / @for / @switch control flow, @defer, typed reactive forms, provideHttpClient, functional guards and interceptors, and server-side rendering with hydration — as described by the official documentation at angular.dev, which is the reference these pages are written and verified against.

This content was generated with the assistance of AI and should be verified against angular.dev before being relied on in production. Angular ships a major release roughly every six months and its APIs continue to evolve: the examples here target the current major release; where a consulted source disagrees with the current documentation, the documentation wins and the difference is noted.

This section’s bibliography lists the reference material consulted while preparing these pages.

Angular is written in TypeScript and expects your application to be too. This page covers only the language features that show up constantly in Angular code; for the language itself see the TypeScript Reference, and for the underlying runtime semantics see JavaScript / TypeScript types and classes.

The subset that matters

Type annotations on parameters, fields, and return values give the compiler and the template type-checker something to verify.
Interfaces describe the shape of data — API responses, component inputs, configuration objects.
readonly marks fields that must not be reassigned after construction; pair it with signals for state that is only replaced through .set() / .update().
Union and literal types model a value that is one of a fixed set — a status, a variant, a mode.
Generics let a service or a function work over a caller-chosen type without losing type safety (HttpClient.get<User>(…), signal<User | null>(null)).
Utility types transform existing types: Partial<T> (all properties optional), Pick<T, K> (a subset), Record<K, V> (a map type).

export interface User {
  readonly id: number;
  name: string;
  role: 'admin' | 'editor' | 'viewer';   // literal union
}

// generic service method
getUser(id: number) {
  return this.http.get<User>(`/api/users/${id}`);
}

// utility types
type UserPatch = Partial<User>;                 // { id?, name?, role? }
type UserSummary = Pick<User, 'id' | 'name'>;   // { id, name }
type UsersById = Record<number, User>;          // { [id: number]: User }

See the TypeScript handbook for the full language reference.

Decorators as Angular uses them

A decorator is a function prefixed with @ that attaches metadata to a class (or, in legacy code, a class member). Angular reads that metadata to know how to compile and wire the class. The class-level decorators are still current: @Component, @Injectable, @Directive, @Pipe.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class Logger {
  log(message: string): void {
    console.log(`[app] ${message}`);
  }
}

The legacy property decorators — @Input(), @Output(), @ViewChild(), @HostBinding() — still work but are superseded by the signal-based functions input(), output(), model(), viewChild(), and host metadata. New code uses the functions; see component communication. The class decorators above are not going away.

tsconfig essentials

ng new generates a tsconfig.json with strict type-checking already on. The settings that matter most:

{
  "compilerOptions": {
    "strict": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

strict turns on the full strict family (strictNullChecks, noImplicitAny, and the rest) for your TypeScript.
strictTemplates (under angularCompilerOptions) extends that checking into templates: binding expressions, @for loop variables, pipe argument types, and component input types are all verified at build time. It replaces the older, weaker fullTemplateTypeCheck flag.

Keep both on. The Angular Language Service surfaces the same template diagnostics live in the editor. For the compiler options in full see the TypeScript documentation.