Types, Interfaces, and Unions

Interfaces define the shape of objects. In Angular, they are used to type component inputs, service responses, and configuration objects.

Defining and Using Interfaces

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'editor' | 'viewer';
}

interface CreateUserRequest {
  name: string;
  email: string;
  role?: 'admin' | 'editor' | 'viewer';
}

Using Interfaces in Angular Components

import { Component, Input } from '@angular/core';

interface CardData {
  title: string;
  description: string;
  imageUrl?: string;
}

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <h3>{{ data.title }}</h3>
      <p>{{ data.description }}</p>
      <img *ngIf="data.imageUrl" [src]="data.imageUrl" [alt]="data.title">
    </div>
  `,
})
export class CardComponent {
  @Input({ required: true }) data!: CardData;
}

Optional and Readonly Properties

interface Config {
  apiUrl: string;           // required
  timeout?: number;         // optional
  readonly retries: number; // cannot be reassigned
}

Interface vs Type Alias

// Interface — preferred for object shapes
interface ButtonProps {
  label: string;
  disabled?: boolean;
}

// Type alias — needed for unions
type Status = 'idle' | 'loading' | 'success' | 'error';

type Result<T> = { success: true; data: T } | { success: false; error: string };

Union types allow a variable to hold one of several types. They are essential for modeling state that can take different shapes.

Basic Union Types

type ID = string | number;

function formatId(id: ID): string {
  return id.toString();
}

Discriminated Unions

A discriminated union uses a common literal property to distinguish between variants:

type ApiState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: string };

function renderState<T>(state: ApiState<T>): string {
  switch (state.status) {
    case 'idle':
      return 'Waiting...';
    case 'loading':
      return 'Loading...';
    case 'success':
      return `Data: ${JSON.stringify(state.data)}`;
    case 'error':
      return `Error: ${state.error}`;
  }
}

Union Types in Angular Templates

@Component({
  selector: 'app-status',
  template: `
    <div [ngSwitch]="status.type">
      <p *ngSwitchCase="'success'">{{ status.message }}</p>
      <p *ngSwitchCase="'error'">{{ status.message }}</p>
      <p *ngSwitchDefault>Unknown status</p>
    </div>
  `,
})
export class StatusComponent {
  @Input() status!: { type: 'success'; message: string } | { type: 'error'; message: string };
}

Type Narrowing

TypeScript narrows union types based on checks:

function process(value: string | number | null) {
  if (value === null) {
    return 'No value';
  }
  // TypeScript knows value is string | number here
  if (typeof value === 'string') {
    return value.toUpperCase(); // narrowed to string
  }
  return value.toFixed(2); // narrowed to number
}