TypeScript in Angular

Angular is TypeScript-only. Strict mode, decorators, and a typed API surface are how the framework keeps you out of trouble.

4 min read Level 1/5 #angular#typescript

What you'll learn

Know what tsconfig strict mode buys you
See decorators in action
Use interfaces and generics in components and services

You can write React in plain JS. You cannot write Angular in plain JS — the framework is built on TypeScript features like decorators and metadata reflection, and the docs assume you are using it.

Strict Mode Is On

ng new sets "strict": true in tsconfig.json. That turns on:

strictNullChecks — no implicit null/undefined
noImplicitAny — every variable needs a known type
strictPropertyInitialization — class fields must be initialized

You will fight the compiler more on day one. By day thirty you will appreciate that it caught the bug your test suite missed.

Decorators Everywhere

Decorators attach metadata that Angular reads at runtime to wire things up. They look unusual at first but you only see a handful:

@Component({ selector: 'app-x', template: '...' })
export class XComponent {}

@Injectable({ providedIn: 'root' })
export class ApiService {}

@Directive({ selector: '[appAutofocus]' })
export class AutofocusDirective {}

@Pipe({ name: 'truncate' })
export class TruncatePipe {}

Interfaces and Generics for Real Code

Define the shape of your data once, then let the compiler enforce it everywhere:

export interface User {
  id: number;
  name: string;
  email: string;
}

import { signal, computed } from '@angular/core';

const users = signal<User[]>([]);
const adminCount = computed(() => users().filter(u => u.email.endsWith('@admin.io')).length);

Generics flow through Angular’s APIs: signal<T>, HttpClient.get<T>(), FormControl<T>, EventEmitter<T>. Type one end, get autocomplete on the other.

Signals — The New Reactivity →