Hiprup

What is TypeScript? Why is it used in Angular?

TypeScript is a strongly-typed superset of JavaScript developed by Microsoft. Compiles to plain JavaScript before running. Angular is built in TypeScript and strongly recommends it for application code.

  • Static typing — catches type errors at compile time, before code runs.

  • Better tooling — rich autocomplete, refactoring, navigation in IDEs (VS Code, WebStorm).

  • Decorators — Angular relies on TypeScript decorators (@Component, @Injectable) for metadata.

  • Interfaces and generics — describe data shapes and reusable contracts; useful for forms, services, HTTP responses.

  • Self-documenting — types double as inline API documentation; teams onboard faster.

  • Strict modestrict: true in tsconfig catches null/undefined bugs early; Angular projects use it by default.

  • Compiles down to JS — the browser only ever sees JavaScript.

// TypeScript in Angular — typed component with strict types
import { Component, Input, Output, EventEmitter } from '@angular/core';

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <button (click)="onEdit()">Edit</button>
    </div>
  `
})
export class UserCardComponent {
  @Input({ required: true }) user!: User;        // typed, required input
  @Output() edit = new EventEmitter<string>();   // typed event payload

  onEdit(): void {
    this.edit.emit(this.user.id);  // compile-time error if you emit a number
  }
}

Three TypeScript features that Angular depends on are visible. (1) The User interface gives @Input() user a precise shape — the template gets autocomplete on user.name and the compiler flags typos. (2) Decorators (@Component, @Input, @Output) attach metadata that Angular reads at build time.

(3) EventEmitter<string> is a generic — emitting this.edit.emit(123) would be a compile error. With strictTemplates: true in tsconfig.json, even template expressions are type-checked.

Three wins to name: compile-time types, decorators (Angular's metadata needs them), IDE tooling. Honest framing: TS is compile-time safety, not runtime — pair with Zod for API responses.

What is TypeScript? Why is it used in Angular? | Hiprup