Interfaces & models

// ✓ A type used only by this component → in the same file
interface SortOption {
  value: 'price' | 'rating' | 'name';
  label: string;
}

@Component({ selector: 'app-sort-menu', /* ... */ })
export class SortMenu {
  protected readonly options: SortOption[] = [
    { value: 'price', label: 'Price' },
    { value: 'rating', label: 'Rating' },
  ];
}

// models/product-dto.ts — EXACTLY the shape from the server
export interface ProductDto {
  id: number;
  product_name: string;
  price_cents: number;
  stock: number;
  created_at: string;       // ISO string
  discount: number | null;
}

// models/product.ts — what the UI needs
export interface Product {
  id: number;
  name: string;
  price: number;            // currency units, not cents
  inStock: boolean;         // derived
  createdAt: Date;
  discount?: number;        // no null
}

// models/product-mapper.ts — the only place that knows both
export function toProduct(dto: ProductDto): Product {
  return {
    id: dto.id,
    name: dto.product_name,
    price: dto.price_cents / 100,
    inStock: dto.stock > 0,
    createdAt: new Date(dto.created_at),
    ...(dto.discount !== null && { discount: dto.discount }),
  };
}

// interface: object shapes (extensible, clear error messages)
export interface User {
  id: number;
  name: string;
}
export interface Admin extends User {
  permissions: string[];
}

// type: unions, intersections, derived types, functions
export type Role = 'admin' | 'editor' | 'viewer';
export type Id = number | string;
export type UserPreview = Pick<User, 'id' | 'name'>;
export type UserPatch = Partial<Omit<User, 'id'>>;
export type Comparator<T> = (a: T, b: T) => number;
export type LoadState<T> = { status: 'loading' } | { status: 'ok'; data: T } | { status: 'error'; error: string };

// ✓ A union of strings + an `as const` object instead of an enum
export const ORDER_STATUSES = ['pending', 'paid', 'shipped', 'cancelled'] as const;
export type OrderStatus = (typeof ORDER_STATUSES)[number]; // 'pending' | 'paid' | ...

export const ORDER_LABELS: Record<OrderStatus, string> = {
  pending: 'Pending',
  paid: 'Paid',
  shipped: 'Shipped',
  cancelled: 'Cancelled',
}; // if you add a status and forget its label → compile error

// In the template: @for (s of statuses; track s) { ... } — easy to iterate, without Object.values(Enum)

// ✓ Clear names, without useless prefixes/suffixes
interface Product {}                 // not IProduct, not ProductModel, not ProductInterface
interface ProductDto {}              // the shape from the API
interface CreateProductRequest {}    // the body for POST
interface ProductFilters {}          // UI state
type ProductId = number;             // semantic alias (optional)

// ✗ Interfaces for services “just because”
interface IProductService { list(): Observable<Product[]>; } // adds nothing
// Want several implementations / mocks? → an abstract class as the token (see “inject() & @Service()”)

// Derive types from the source of truth instead of rewriting them
type UserRow = Pick<User, 'id' | 'name' | 'email'>;
type ProductForm = Omit<Product, 'id' | 'createdAt'>;
type Store = InstanceType<typeof ProductsStore>;
type CartItem = ReturnType<CartStore['items']>[number];

// A validation schema = type + runtime validation, one source
const UserSchema = z.object({ id: z.number(), name: z.string(), email: z.email() });
type User = z.infer<typeof UserSchema>;

// Types generated from OpenAPI (openapi-typescript, orval, ng-openapi-gen)
import type { components } from './generated/api';
type ProductDto = components['schemas']['Product'];