// Before 5.5 — manual type predicate required
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

const mixed: (string | number)[] = ['hello', 42, 'world', 7];
const strings = mixed.filter(isString);
// ✅ TypeScript knows strings is string[]

// TypeScript 5.5+ — type predicate is inferred!
const mixed: (string | number | null | undefined)[] = ['hello', 42, null, 'world'];

const strings = mixed.filter(x => typeof x === 'string');
// ✅ TypeScript infers strings is string[] — no manual type guard needed!

const nonNull = mixed.filter(x => x != null);
// ✅ TypeScript infers nonNull is (string | number)[]

// Modern standard decorators
function logged(target: ClassMethodDecoratorContext) {
  return function (this: unknown, ...args: unknown[]) {
    console.log(`Calling ${String(target.name)} with`, args);
    const result = (target as Function).apply(this, args);
    console.log(`${String(target.name)} returned`, result);
    return result;
  };
}

function memoize(target: ClassMethodDecoratorContext) {
  const cache = new Map();
  return function (this: unknown, ...args: unknown[]) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = (target as Function).apply(this, args);
    cache.set(key, result);
    return result;
  };
}

class DataService {
  @logged
  @memoize
  async fetchUser(id: string): Promise<User> {
    return await db.users.findById(id);
  }
}

// Without using — manual cleanup required
async function processFile() {
  const file = await openFile('data.csv');
  try {
    const data = await file.read();
    return processData(data);
  } finally {
    await file.close(); // Easy to forget!
  }
}

// With using — cleanup is automatic and guaranteed
async function processFile() {
  await using file = openFile('data.csv');
  const data = await file.read();
  return processData(data);
} // file.close() called automatically here, even on error

class DatabaseConnection implements AsyncDisposable {
  private connection: Connection;
  
  constructor(private url: string) {}
  
  async connect() {
    this.connection = await createConnection(this.url);
    return this;
  }
  
  async query<T>(sql: string, params: unknown[]): Promise<T[]> {
    return this.connection.execute(sql, params);
  }
  
  async [Symbol.asyncDispose]() {
    await this.connection.close();
    console.log('Database connection closed');
  }
}

async function getUserCount() {
  await using db = await new DatabaseConnection(DB_URL).connect();
  const [result] = await db.query<{ count: number }>(
    'SELECT COUNT(*) as count FROM users', 
    []
  );
  return result.count;
} // Connection automatically closed here

// Route type generation
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
type ApiPath = '/users' | '/posts' | '/comments';

type ApiEndpoint = `${HTTPMethod} ${ApiPath}`;
// "GET /users" | "GET /posts" | "GET /comments" | "POST /users" | ...

// CSS property type safety
type CSSProperty = 'margin' | 'padding' | 'border';
type CSSDirection = 'top' | 'right' | 'bottom' | 'left';

type CSSDirectionalProperty = `${CSSProperty}-${CSSDirection}`;
// "margin-top" | "margin-right" | ... | "border-left"

// Event handler naming convention enforcement
type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur" | "onChange"

function createEventHandlers<T extends EventName>(
  events: T[]
): Record<`on${Capitalize<T>}`, () => void> {
  // Type-safe event handler map
  return Object.fromEntries(
    events.map(e => [`on${e[0].toUpperCase()}${e.slice(1)}`, () => {}])
  ) as any;
}

type Colors = 'red' | 'green' | 'blue';
type RGB = [number, number, number];
type Hex = string;

type Palette = Record<Colors, RGB | Hex>;

// With 'as' — loses information, potential errors masked
const palette = {
  red: [255, 0, 0],
  green: '#00ff00',
  blue: [0, 0, 255],
} as Palette;

palette.red.toUpperCase(); // ❌ No error, but this will fail at runtime!

// With 'satisfies' — validates type AND preserves inference
const palette2 = {
  red: [255, 0, 0],
  green: '#00ff00', 
  blue: [0, 0, 255],
} satisfies Palette;

palette2.red.toUpperCase();   // ✅ Error caught! red is RGB, not string
palette2.green.toUpperCase(); // ✅ Works! green is string
palette2.red.map(x => x * 2); // ✅ Works! red is tuple, has .map()

// Before — required 'as const' at every call site
function createRoute<T extends readonly string[]>(paths: T): T {
  return paths;
}

const routes = createRoute(['/', '/about', '/contact'] as const);
// ^^ Required 'as const' to preserve literal types

// TypeScript 5.0+ — use 'const' in generic constraint
function createRoute<const T extends readonly string[]>(paths: T): T {
  return paths;
}

const routes = createRoute(['/', '/about', '/contact']);
// ✅ TypeScript infers readonly ["/", "/about", "/contact"] without 'as const'