TypeScript

let username: string = "alice";
let price: number = 29.99;
let isActive: boolean = true;

let resetValue: null = null;
let notAssigned: undefined = undefined;

// Practical usage — nullable types
let selectedUserId: string | null = null;
selectedUserId = "usr_482";

let legacyPayload: any = fetchFromOldApi();
legacyPayload.whatever.you.want; // No error
legacyPayload = 42;
legacyPayload = "now a string";

let rawInput: unknown = JSON.parse(userInput);

// Must narrow before using
if (typeof rawInput === "string") {
  console.log(rawInput.toUpperCase()); // OK
}

// rawInput.toUpperCase(); // Error: Object is of type 'unknown'

function throwAppError(msg: string): never {
  throw new Error(msg);
}

// Used for exhaustive checks
type Shape = "circle" | "square";
function getArea(shape: Shape): number {
  switch (shape) {
    case "circle": return Math.PI * 10;
    case "square": return 100;
    default:
      const _exhaustive: never = shape;
      return _exhaustive;
  }
}

function logMessage(msg: string): void {
  console.log(`[LOG]: ${msg}`);
  // no return statement needed
}

// Callback typing
type EventHandler = (eventName: string) => void;

const uniqueKey: unique symbol = Symbol("cacheKey");
let regularSym: symbol = Symbol("temp");

let hugeNumber: bigint = 9007199254740993n;
let anotherBig: bigint = BigInt("123456789012345678");

let scores: number[] = [95, 87, 72];
let names: Array<string> = ["Alice", "Bob"];

// Tuple — fixed length, positional types
let userRecord: [string, number, boolean] = ["alice", 30, true];

// Named tuple elements (TS 4.0+)
let range: [start: number, end: number] = [0, 100];

let product: { name: string; price: number; inStock?: boolean } = {
  name: "Keyboard",
  price: 79.99,
};

// The lowercase 'object' type means any non-primitive
let config: object = { debug: true };
// config.debug; // Error — object type has no known properties

let orderId: string = "ORD-7821";
const maxRetries: number = 3;
let tags: string[] = ["urgent", "billing"];

// Often unnecessary when the type is obvious
let count = 0; // inferred as number
const label = "total"; // inferred as literal "total"

function calculateTotal(
  items: { name: string; price: number }[],
  taxRate: number
): number {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  return subtotal * (1 + taxRate);
}

function findUser(id: string): User | undefined {
  return userDatabase.get(id);
}

// Arrow function return type
const formatCurrency = (amount: number): string => {
  return `$${amount.toFixed(2)}`;
};

// Async function
async function fetchOrder(id: string): Promise<Order> {
  const resp = await fetch(`/api/orders/${id}`);
  return resp.json();
}

let customerName = "Kenji"; // string
const port = 8080; // literal type 8080 (const narrows)

let results = [1, 2, 3]; // number[]
let mixed = [1, "two", true]; // (string | number | boolean)[]

// Return type inference
function double(n: number) {
  return n * 2; // inferred return: number
}

const rawData = JSON.parse(payload) as { userId: string; role: string };

// HTMLElement narrowing
const canvas = document.getElementById("game") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");

// Double assertion for incompatible types (use sparingly)
const weird = ("hello" as unknown) as number;

function parseInput(input: string): string[];
function parseInput(input: number): number[];
function parseInput(input: string | number): string[] | number[] {
  if (typeof input === "string") {
    return input.split(",");
  }
  return Array.from({ length: input }, (_, i) => i);
}

const words = parseInput("a,b,c"); // string[]
const nums = parseInput(5);        // number[]

interface Product {
  id: string;
  name: string;
  price: number;
  getDisplayPrice(): string;
}

const laptop: Product = {
  id: "prod_001",
  name: "Developer Laptop",
  price: 1299,
  getDisplayPrice() {
    return `$${this.price.toFixed(2)}`;
  },
};

interface NotificationConfig {
  title: string;
  body: string;
  icon?: string;
  durationMs?: number;
  onDismiss?: () => void;
}

function showNotification(config: NotificationConfig) {
  const duration = config.durationMs ?? 3000;
  console.log(`Showing: ${config.title} for ${duration}ms`);
}

interface DatabaseRecord {
  readonly id: string;
  readonly createdAt: Date;
  name: string;
  updatedAt: Date;
}

const record: DatabaseRecord = {
  id: "rec_abc",
  createdAt: new Date(),
  name: "Initial",
  updatedAt: new Date(),
};

record.name = "Updated"; // OK
// record.id = "rec_xyz"; // Error: Cannot assign to 'id' because it is read-only

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface SoftDeletable {
  deletedAt: Date | null;
}

interface BlogPost extends Timestamped, SoftDeletable {
  title: string;
  content: string;
  authorId: string;
}

// BlogPost has: title, content, authorId, createdAt, updatedAt, deletedAt

interface Logger {
  info(message: string): void;
  error(message: string, context?: Record<string, unknown>): void;
}

class ConsoleLogger implements Logger {
  info(message: string): void {
    console.log(`[INFO] ${message}`);
  }

  error(message: string, context?: Record<string, unknown>): void {
    console.error(`[ERROR] ${message}`, context ?? "");
  }
}

interface TranslationMap {
  [locale: string]: string;
}

const greetings: TranslationMap = {
  en: "Hello",
  es: "Hola",
  ja: "こんにちは",
};

// Mixed: known + dynamic keys
interface AppConfig {
  appName: string;
  version: string;
  [key: string]: string; // all values must be string
}

// Original library type
interface Window {
  title: string;
}

// Your augmentation — merges with the above
interface Window {
  analyticsId: string;
}

// Now Window has both title and analyticsId
const w: Window = {
  title: "My App",
  analyticsId: "UA-12345",
};

type UserId = string;
type Coordinate = { x: number; y: number };
type StringOrNumber = string | number;
type Callback = (data: unknown) => void;

const origin: Coordinate = { x: 0, y: 0 };
const userId: UserId = "usr_9f3a";

type Status = "pending" | "active" | "archived";
type ApiResponse = SuccessResult | ErrorResult;

interface SuccessResult {
  ok: true;
  data: unknown;
}
interface ErrorResult {
  ok: false;
  errorCode: number;
  message: string;
}

function handleResponse(res: ApiResponse) {
  if (res.ok) {
    console.log(res.data); // narrowed to SuccessResult
  } else {
    console.error(res.message); // narrowed to ErrorResult
  }
}

type WithId = { id: string };
type WithTimestamps = { createdAt: Date; updatedAt: Date };

type UserRecord = WithId & WithTimestamps & {
  email: string;
  displayName: string;
};

const user: UserRecord = {
  id: "usr_001",
  email: "[email protected]",
  displayName: "Dev User",
  createdAt: new Date(),
  updatedAt: new Date(),
};

type Direction = "north" | "south" | "east" | "west";
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(direction: Direction, steps: number) {
  console.log(`Moving ${direction} by ${steps}`);
}

move("north", 3); // OK
// move("up", 3); // Error: Argument of type '"up"' is not assignable

type EventName = "click" | "scroll" | "resize";
type EventHandler = `on${Capitalize<EventName>}`;
// Result: "onClick" | "onScroll" | "onResize"

type CssUnit = "px" | "em" | "rem" | "%";
type CssValue = `${number}${CssUnit}`;

const width: CssValue = "100px"; // OK
const padding: CssValue = "1.5rem"; // OK
// const bad: CssValue = "big"; // Error

type ApiResult<T> = {
  data: T;
  status: number;
  timestamp: Date;
};

type Nullable<T> = T | null;
type Pair<A, B = A> = [A, B];

const userResult: ApiResult<{ name: string }> = {
  data: { name: "Priya" },
  status: 200,
  timestamp: new Date(),
};

const point: Pair<number> = [10, 20]; // both number
const labeled: Pair<string, number> = ["x", 42];

function firstElement<T>(items: T[]): T | undefined {
  return items[0];
}

const topScore = firstElement([95, 87, 72]); // number | undefined
const firstName = firstElement(["Alice", "Bob"]); // string | undefined

// Multiple type parameters
function mapEntry<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}
const entry = mapEntry("age", 30); // [string, number]

interface Repository<T> {
  findById(id: string): Promise<T | null>;
  findAll(): Promise<T[]>;
  save(entity: T): Promise<T>;
  delete(id: string): Promise<boolean>;
}

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

class UserRepository implements Repository<User> {
  async findById(id: string): Promise<User | null> {
    // implementation
    return null;
  }
  async findAll(): Promise<User[]> { return []; }
  async save(entity: User): Promise<User> { return entity; }
  async delete(id: string): Promise<boolean> { return true; }
}

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }

  get size(): number {
    return this.items.length;
  }
}

const numberStack = new Stack<number>();
numberStack.push(10);
numberStack.push(20);
const top = numberStack.pop(); // number | undefined

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): T {
  console.log(`Length: ${item.length}`);
  return item;
}

logLength("hello");        // string has .length
logLength([1, 2, 3]);      // arrays have .length
// logLength(42);           // Error: number has no .length

// Constrain to object keys
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const color = getProperty({ r: 255, g: 128, b: 0 }, "g"); // number

interface ApiResponse<TData = unknown, TError = string> {
  success: boolean;
  data?: TData;
  error?: TError;
}

// Uses defaults
const basic: ApiResponse = { success: true };

// Overrides first, keeps second default
const typed: ApiResponse<{ users: string[] }> = {
  success: true,
  data: { users: ["alice"] },
};

// Overrides both
const custom: ApiResponse<null, { code: number; msg: string }> = {
  success: false,
  error: { code: 404, msg: "Not found" },
};

// Make all properties optional and nullable
type Draft<T> = {
  [K in keyof T]?: T[K] | null;
};

interface Article {
  title: string;
  body: string;
  publishedAt: Date;
}

type ArticleDraft = Draft<Article>;
// { title?: string | null; body?: string | null; publishedAt?: Date | null }

const draft: ArticleDraft = {
  title: "Work in progress",
};

type IsArray<T> = T extends any[] ? true : false;

type Test1 = IsArray<string[]>;  // true
type Test2 = IsArray<number>;    // false

// Extracting element types
type ElementOf<T> = T extends (infer E)[] ? E : never;

type StrEl = ElementOf<string[]>;      // string
type NumEl = ElementOf<number[]>;      // number
type NoEl = ElementOf<boolean>;        // never

interface Settings {
  theme: "light" | "dark";
  fontSize: number;
  notifications: boolean;
}

function updateSettings(current: Settings, changes: Partial<Settings>): Settings {
  return { ...current, ...changes };
}

const updated = updateSettings(
  { theme: "light", fontSize: 14, notifications: true },
  { fontSize: 16 } // only need to pass what changed
);

interface FormFields {
  username?: string;
  email?: string;
  password?: string;
}

// After validation, all fields must be present
type ValidatedForm = Required<FormFields>;

const validated: ValidatedForm = {
  username: "alice",
  email: "[email protected]",
  password: "s3cureP@ss",
};
// Missing any field → compile error

interface AppState {
  user: { name: string; role: string };
  items: string[];
  isLoading: boolean;
}

function freezeState(state: AppState): Readonly<AppState> {
  return Object.freeze(state);
}

const frozen = freezeState({ user: { name: "A", role: "admin" }, items: [], isLoading: false });
// frozen.isLoading = true; // Error: Cannot assign to 'isLoading'

interface Employee {
  id: string;
  name: string;
  email: string;
  department: string;
  salary: number;
}

type EmployeePreview = Pick<Employee, "id" | "name" | "department">;

const preview: EmployeePreview = {
  id: "emp_042",
  name: "Jordan",
  department: "Engineering",
};

interface BlogPost {
  id: string;
  title: string;
  body: string;
  authorId: string;
  createdAt: Date;
}

type CreatePostInput = Omit<BlogPost, "id" | "createdAt">;

const newPost: CreatePostInput = {
  title: "Getting Started with TypeScript",
  body: "TypeScript adds type safety to JavaScript...",
  authorId: "usr_007",
};

type Role = "admin" | "editor" | "viewer";

interface Permission {
  canRead: boolean;
  canWrite: boolean;
  canDelete: boolean;
}

const rolePermissions: Record<Role, Permission> = {
  admin:  { canRead: true,  canWrite: true,  canDelete: true },
  editor: { canRead: true,  canWrite: true,  canDelete: false },
  viewer: { canRead: true,  canWrite: false, canDelete: false },
};

type AllEvents = "click" | "scroll" | "keydown" | "keyup" | "resize";

type KeyboardEvents = Extract<AllEvents, "keydown" | "keyup">;
// "keydown" | "keyup"

type NonKeyboardEvents = Exclude<AllEvents, "keydown" | "keyup">;
// "click" | "scroll" | "resize"

// Works with complex types too
type OnlyStrings = Extract<string | number | boolean, string>;
// string

type MaybeUser = string | null | undefined;
type DefiniteUser = NonNullable<MaybeUser>;
// string

function processValue(input: string | null | undefined) {
  // After validation
  const safe: NonNullable<typeof input> = input!;
  console.log(safe.toUpperCase());
}

function createOrder(userId: string, items: string[], coupon?: string) {
  return {
    orderId: `ord_${Date.now()}`,
    userId,
    items,
    discount: coupon ? 0.1 : 0,
  };
}

type OrderResult = ReturnType<typeof createOrder>;
// { orderId: string; userId: string; items: string[]; discount: number }

type OrderParams = Parameters<typeof createOrder>;
// [userId: string, items: string[], coupon?: string]

type PromisedUser = Promise<{ id: string; name: string }>;
type ResolvedUser = Awaited<PromisedUser>;
// { id: string; name: string }

// Handles nested promises
type DeepPromise = Promise<Promise<Promise<number>>>;
type DeepResolved = Awaited<DeepPromise>;
// number

// Practical: extract resolved type from async function
async function loadConfig() {
  return { apiUrl: "https://api.example.com", timeout: 5000 };
}
type Config = Awaited<ReturnType<typeof loadConfig>>;

enum HttpStatus {
  Ok = 200,
  Created = 201,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
  ServerError = 500,
}

function isSuccessful(status: HttpStatus): boolean {
  return status >= 200 && status < 300;
}

console.log(isSuccessful(HttpStatus.Ok)); // true
console.log(HttpStatus.NotFound);         // 404

enum LogLevel {
  Debug = "DEBUG",
  Info = "INFO",
  Warn = "WARN",
  Error = "ERROR",
  Fatal = "FATAL",
}

function log(level: LogLevel, message: string) {
  console.log(`[${level}] ${message}`);
}

log(LogLevel.Error, "Database connection lost");
// log("ERROR", "..."); // Error: '"ERROR"' is not assignable to 'LogLevel'

const enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

const playerDirection = Direction.Up;
// Compiles to: const playerDirection = "UP";
// No Direction object exists at runtime

enum Permission {
  Read = "READ",
  Write = "WRITE",
  Admin = "ADMIN",
}

// Each member is its own type
function grantAdmin(userId: string, level: Permission.Admin) {
  console.log(`Granting admin to ${userId}`);
}

grantAdmin("usr_1", Permission.Admin); // OK
// grantAdmin("usr_1", Permission.Read); // Error: not assignable to Permission.Admin

enum Priority {
  Low = 0,
  Medium = 1,
  High = 2,
  Critical = 3,
}

const level = Priority.High;
console.log(level);             // 2
console.log(Priority[level]);   // "High"

// Practical: converting API response to label
function getPriorityLabel(code: number): string {
  return Priority[code] ?? "Unknown";
}

// Instead of enum:
type Theme = "light" | "dark" | "system";

// Object const pattern for when you need both runtime values and types
const THEMES = {
  Light: "light",
  Dark: "dark",
  System: "system",
} as const;

type Theme2 = (typeof THEMES)[keyof typeof THEMES];
// "light" | "dark" | "system"

function applyTheme(theme: Theme2) {
  document.body.dataset.theme = theme;
}

function formatValue(input: string | number | boolean): string {
  if (typeof input === "string") {
    return input.toUpperCase();
  }
  if (typeof input === "number") {
    return input.toFixed(2);
  }
  return input ? "Yes" : "No";
}

class ApiError extends Error {
  constructor(public statusCode: number, message: string) {
    super(message);
  }
}

class ValidationError extends Error {
  constructor(public fields: string[], message: string) {
    super(message);
  }
}

function handleError(err: Error) {
  if (err instanceof ApiError) {
    console.log(`API error ${err.statusCode}: ${err.message}`);
  } else if (err instanceof ValidationError) {
    console.log(`Invalid fields: ${err.fields.join(", ")}`);
  } else {
    console.log(`Unknown error: ${err.message}`);
  }
}

interface EmailContact {
  email: string;
  name: string;
}

interface PhoneContact {
  phone: string;
  name: string;
}

function sendMessage(contact: EmailContact | PhoneContact) {
  if ("email" in contact) {
    console.log(`Emailing ${contact.email}`);
  } else {
    console.log(`Calling ${contact.phone}`);
  }
}

interface Fish {
  swim: () => void;
  habitat: "water";
}

interface Bird {
  fly: () => void;
  habitat: "air";
}

function isFish(creature: Fish | Bird): creature is Fish {
  return creature.habitat === "water";
}

function move(creature: Fish | Bird) {
  if (isFish(creature)) {
    creature.swim(); // TypeScript knows this is Fish
  } else {
    creature.fly();  // TypeScript knows this is Bird
  }
}

interface LoadingState {
  status: "loading";
}

interface SuccessState {
  status: "success";
  data: string[];
}

interface ErrorState {
  status: "error";
  errorMessage: string;
}

type RequestState = LoadingState | SuccessState | ErrorState;

function renderState(state: RequestState): string {
  switch (state.status) {
    case "loading":
      return "Loading...";
    case "success":
      return `Got ${state.data.length} items`; // data is available
    case "error":
      return `Error: ${state.errorMessage}`; // errorMessage is available
  }
}

function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== "string") {
    throw new TypeError(`Expected string, got ${typeof value}`);
  }
}

function assertDefined<T>(value: T | null | undefined): asserts value is T {
  if (value == null) {
    throw new Error("Value must not be null or undefined");
  }
}

function processInput(data: unknown) {
  assertIsString(data);
  // After this line, data is typed as string
  console.log(data.toUpperCase());
}

function printLength(input: string | null | undefined) {
  if (input) {
    // input is narrowed to string (null and undefined excluded)
    console.log(`Length: ${input.length}`);
  } else {
    console.log("No input provided");
  }
}

// Combining with logical operators
function getDisplayName(first?: string, last?: string): string {
  return (first && last) ? `${first} ${last}` : first ?? last ?? "Anonymous";
}

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>;    // "yes"
type B = IsString<number>;    // "no"
type C = IsString<"hello">;   // "yes"

// Practical: flatten one level of array
type Flatten<T> = T extends Array<infer Item> ? Item : T;

type Str = Flatten<string[]>;   // string
type Num = Flatten<number>;     // number (not an array, returned as-is)

interface UserProfile {
  name: string;
  email: string;
  age: number;
}

// Make every property a getter function
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<UserProfile>;
// {
//   getName: () => string;
//   getEmail: () => string;
//   getAge: () => number;
// }

// Make all properties mutable (remove readonly)
type Mutable<T> = {
  -readonly [K in keyof T]: T[K];
};

// Extract the resolved type from a Promise
type UnwrapPromise<T> = T extends Promise<infer R> ? R : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<number>;           // number

// Extract function first argument
type FirstArg<T> = T extends (first: infer F, ...rest: any[]) => any ? F : never;

type FA = FirstArg<(name: string, age: number) => void>;  // string

// Extract array element type
type ArrayItem<T> = T extends readonly (infer E)[] ? E : never;
type Item = ArrayItem<readonly ["a", "b", "c"]>;  // "a" | "b" | "c"

// JSON-compatible type
type JsonValue =
  | string
  | number
  | boolean
  | null
  | JsonValue[]
  | { [key: string]: JsonValue };

// Deep Readonly
type DeepReadonly<T> = T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;

interface NestedConfig {
  db: { host: string; port: number; ssl: { enabled: boolean } };
}

type FrozenConfig = DeepReadonly<NestedConfig>;
// All levels are readonly — db.ssl.enabled cannot be reassigned

type USD = number & { readonly __brand: "USD" };
type EUR = number & { readonly __brand: "EUR" };

function usd(amount: number): USD {
  return amount as USD;
}

function eur(amount: number): EUR {
  return amount as EUR;
}

function chargeUSD(amount: USD) {
  console.log(`Charging $${amount}`);
}

const price = usd(29.99);
chargeUSD(price);          // OK
// chargeUSD(eur(25.00));  // Error: EUR is not assignable to USD
// chargeUSD(29.99);       // Error: number is not assignable to USD

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIPath = "/users" | "/orders" | "/products";

// Generate all route strings
type APIRoute = `${HTTPMethod} ${APIPath}`;
// "GET /users" | "GET /orders" | "GET /products" | "POST /users" | ... (12 total)

// Extract path params
type ExtractParams<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param | ExtractParams<Rest>
    : T extends `${string}:${infer Param}`
    ? Param
    : never;

type Params = ExtractParams<"/users/:userId/posts/:postId">;
// "userId" | "postId"

type ColorMap = Record<string, string | number[]>;

// Without satisfies: loses specific types
// const colors: ColorMap = { ... } → all values are string | number[]

// With satisfies: validates shape AND keeps specific types
const colors = {
  red: "#ff0000",
  green: [0, 255, 0],
  blue: "#0000ff",
} satisfies ColorMap;

colors.red.toUpperCase();   // OK — TypeScript knows red is string
colors.green.map(c => c);   // OK — TypeScript knows green is number[]
// colors.red.map(c => c);  // Error — string has no .map

interface Product {
  id: string;
  name: string;
  price: number;
}

type ProductKey = keyof Product; // "id" | "name" | "price"

function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map(item => item[key]);
}

// typeof: extract type from a runtime value
const defaultSettings = {
  volume: 50,
  brightness: 80,
  darkMode: true,
};

type Settings = typeof defaultSettings;
// { volume: number; brightness: number; darkMode: boolean }

class BankAccount {
  public accountHolder: string;
  private balance: number;
  protected accountType: string;

  constructor(holder: string, initial: number) {
    this.accountHolder = holder;
    this.balance = initial;
    this.accountType = "checking";
  }

  public getBalance(): number {
    return this.balance;
  }

  private validateAmount(amount: number): boolean {
    return amount > 0 && amount <= this.balance;
  }
}

const account = new BankAccount("Alice", 1000);
console.log(account.accountHolder); // OK
// account.balance; // Error: private

// Without parameter properties — verbose
class VerboseUser {
  name: string;
  email: string;
  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
}

// With parameter properties — concise
class User {
  constructor(
    public readonly name: string,
    public email: string,
    private passwordHash: string
  ) {}

  display(): string {
    return `${this.name} <${this.email}>`;
  }
}

abstract class Shape {
  abstract area(): number;
  abstract perimeter(): number;

  describe(): string {
    return `Area: ${this.area().toFixed(2)}, Perimeter: ${this.perimeter().toFixed(2)}`;
  }
}

class Circle extends Shape {
  constructor(private radius: number) {
    super();
  }

  area(): number {
    return Math.PI * this.radius ** 2;
  }

  perimeter(): number {
    return 2 * Math.PI * this.radius;
  }
}

// const shape = new Shape(); // Error: Cannot instantiate abstract class
const circle = new Circle(5);
console.log(circle.describe());

class Transport {
  getSpeed(): number {
    return 0;
  }

  describe(): string {
    return `Speed: ${this.getSpeed()} km/h`;
  }
}

class Train extends Transport {
  override getSpeed(): number {
    return 300;
  }

  // override getSped(): number { // Error with noImplicitOverride:
  //   return 300;                 // 'getSped' does not exist on base
  // }
}

// TS 5.0+ standard decorators (TC39 Stage 3)
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

function log(
  target: any,
  context: ClassMethodDecoratorContext
) {
  const methodName = String(context.name);
  return function (this: any, ...args: any[]) {
    console.log(`Calling ${methodName} with`, args);
    return target.call(this, ...args);
  };
}

@sealed
class OrderService {
  @log
  processOrder(orderId: string) {
    console.log(`Processing ${orderId}`);
  }
}

interface Serializable {
  serialize(): string;
  deserialize(data: string): void;
}

interface Cacheable {
  cacheKey: string;
  ttlSeconds: number;
}

class UserSession implements Serializable, Cacheable {
  cacheKey: string;
  ttlSeconds = 3600;

  constructor(public userId: string, public token: string) {
    this.cacheKey = `session:${userId}`;
  }

  serialize(): string {
    return JSON.stringify({ userId: this.userId, token: this.token });
  }

  deserialize(data: string): void {
    const parsed = JSON.parse(data);
    this.userId = parsed.userId;
    this.token = parsed.token;
  }
}

// global.d.ts
declare function trackEvent(name: string, data?: Record<string, unknown>): void;

declare const APP_VERSION: string;

declare interface ImportMeta {
  env: {
    VITE_API_URL: string;
    VITE_DEBUG: string;
  };
}

// Tell TypeScript about a global that exists at runtime
declare const gtag: (
  command: "config" | "event",
  targetId: string,
  params?: Record<string, unknown>
) => void;

// Tell TypeScript about a global class
declare class Stripe {
  constructor(apiKey: string);
  charges: {
    create(params: { amount: number; currency: string }): Promise<unknown>;
  };
}

gtag("event", "purchase", { value: 99.99 });

// types/untyped-libs.d.ts

// Type an entire untyped npm package
declare module "color-hash" {
  export default class ColorHash {
    constructor(options?: { lightness: number });
    hex(input: string): string;
    rgb(input: string): [number, number, number];
  }
}

// Wildcard: type all .svg imports
declare module "*.svg" {
  const content: string;
  export default content;
}

// Wildcard: type all .css modules
declare module "*.module.css" {
  const classes: Record<string, string>;
  export default classes;
}

// Augmenting Express Request
import "express";

declare module "express" {
  interface Request {
    userId?: string;
    sessionToken?: string;
    permissions?: string[];
  }
}

// Now in your middleware:
import { Request, Response, NextFunction } from "express";

function authMiddleware(req: Request, res: Response, next: NextFunction) {
  req.userId = "usr_123";        // No error — augmented
  req.permissions = ["read"];    // No error — augmented
  next();
}

/// <reference types="vite/client" />
// Enables Vite-specific types like import.meta.env

/// <reference lib="es2022" />
// Includes ES2022 library types

/// <reference path="./custom-globals.d.ts" />
// Explicitly includes another declaration file

// LEGACY: Namespace (avoid in new code)
namespace Validation {
  export interface Rule {
    validate(input: string): boolean;
  }

  export class EmailRule implements Rule {
    validate(input: string): boolean {
      return input.includes("@");
    }
  }
}

// MODERN: Use ES modules instead
// validation.ts
export interface Rule {
  validate(input: string): boolean;
}

export class EmailRule implements Rule {
  validate(input: string): boolean {
    return input.includes("@");
  }
}

// strict: true enables ALL of these at once:
// - strictNullChecks: null/undefined not assignable to other types
// - strictFunctionTypes: contravariant function parameter checking
// - strictBindCallApply: type-check bind, call, apply
// - strictPropertyInitialization: class props must be initialized
// - noImplicitAny: error on implicit any
// - noImplicitThis: error on 'this' with implicit any type
// - useUnknownInCatchVariables: catch variable is unknown, not any
// - alwaysStrict: emit "use strict" in every file

// target: which JS version to emit
// "ES5" — maximum compat (IE11), heavy downleveling
// "ES2020" — good baseline for modern browsers
// "ES2022" — class fields, top-level await, cause in Error
// "ESNext" — latest; may change between TS versions

// module: which module system to use
// "commonjs" — Node.js require/exports
// "es2022" — ES modules with top-level await
// "esnext" — latest ES module features
// "node16" / "nodenext" — Node.js ESM with .mjs/.cjs awareness
// "preserve" — keep import/export as written (TS 5.4+)

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"],
      "@api/*": ["src/api/*"],
      "@types/*": ["src/types/*"]
    }
  }
}

// In your code:
import { Button } from "@components/Button";
import { formatDate } from "@utils/date";
import type { User } from "@types/user";

// noEmit: true — only type-check, don't produce .js files
// Used when a bundler (Vite, esbuild, SWC) handles transpilation
{
  "compilerOptions": {
    "noEmit": true  // tsc is just the type checker
  }
}

// declaration: true — generate .d.ts files alongside .js
// Used for libraries that need to ship type definitions
{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist/types",
    "emitDeclarationOnly": true  // only .d.ts, no .js
  }
}

// isolatedModules: true
// Ensures each file can be transpiled independently
// Required for: Babel, esbuild, SWC, Vite
// Disallows: const enums across files, namespace merging across files

// verbatimModuleSyntax: true (TS 5.0+, replaces isolatedModules)
// Forces you to use 'import type' for type-only imports

import type { User } from "./models";       // erased at runtime
import { processUser } from "./handlers";   // kept at runtime

// import { User } from "./models";
// Error with verbatimModuleSyntax: 'User' is a type and must use 'import type'

// Root tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./packages/shared" },
    { "path": "./packages/server" },
    { "path": "./packages/client" }
  ]
}

// packages/server/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "references": [
    { "path": "../shared" }
  ]
}

// Build with: tsc --build

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "lib": ["ES2022", "DOM", "DOM.Iterable"]
  },
  "include": ["src"]
}

type EventMap = {
  userLogin: (userId: string, timestamp: Date) => void;
  purchase: (orderId: string, amount: number) => void;
  error: (error: Error) => void;
};

class TypedEmitter<T extends Record<string, (...args: any[]) => void>> {
  private handlers = new Map<keyof T, Set<Function>>();

  on<K extends keyof T>(event: K, handler: T[K]): void {
    if (!this.handlers.has(event)) this.handlers.set(event, new Set());
    this.handlers.get(event)!.add(handler);
  }

  emit<K extends keyof T>(event: K, ...args: Parameters<T[K]>): void {
    this.handlers.get(event)?.forEach(fn => fn(...args));
  }
}

const bus = new TypedEmitter<EventMap>();
bus.on("purchase", (orderId, amount) => {
  console.log(`Order ${orderId}: $${amount}`);
});
bus.emit("purchase", "ord_1", 49.99);

interface EmailMessage {
  to: string;
  subject: string;
  body: string;
  cc?: string[];
  priority?: "low" | "normal" | "high";
}

class EmailBuilder {
  private message: Partial<EmailMessage> = {};

  to(address: string): this {
    this.message.to = address;
    return this;
  }
  subject(text: string): this {
    this.message.subject = text;
    return this;
  }
  body(html: string): this {
    this.message.body = html;
    return this;
  }
  cc(addresses: string[]): this {
    this.message.cc = addresses;
    return this;
  }
  priority(level: EmailMessage["priority"]): this {
    this.message.priority = level;
    return this;
  }
  build(): EmailMessage {
    if (!this.message.to || !this.message.subject || !this.message.body) {
      throw new Error("to, subject, and body are required");
    }
    return this.message as EmailMessage;
  }
}

const email = new EmailBuilder()
  .to("[email protected]")
  .subject("Deploy complete")
  .body("<p>All checks passed.</p>")
  .priority("high")
  .build();

type PaymentMethod = "card" | "bank" | "crypto" | "paypal";

function processPayment(method: PaymentMethod): string {
  switch (method) {
    case "card":
      return "Processing card payment";
    case "bank":
      return "Processing bank transfer";
    case "crypto":
      return "Processing crypto payment";
    case "paypal":
      return "Processing PayPal";
    default:
      // If a new member is added to PaymentMethod,
      // this line causes a compile error
      const _exhaustive: never = method;
      throw new Error(`Unknown method: ${_exhaustive}`);
  }
}

// Without as const: types are widened
const config = { apiUrl: "https://api.example.com", retries: 3 };
// { apiUrl: string; retries: number }

// With as const: literal types + readonly
const frozenConfig = {
  apiUrl: "https://api.example.com",
  retries: 3,
  features: ["search", "export"],
} as const;
// { readonly apiUrl: "https://api.example.com"; readonly retries: 3; readonly features: readonly ["search", "export"] }

// Deriving a union type from const values
const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number];
// "admin" | "editor" | "viewer"

type Result<T, E = string> =
  | { ok: true; value: T }
  | { ok: false; error: E };

function parseAge(input: string): Result<number> {
  const num = parseInt(input, 10);
  if (isNaN(num)) return { ok: false, error: "Not a valid number" };
  if (num < 0 || num > 150) return { ok: false, error: "Age out of range" };
  return { ok: true, value: num };
}

const result = parseAge("25");
if (result.ok) {
  console.log(`Age: ${result.value}`); // narrowed to { ok: true; value: number }
} else {
  console.log(`Invalid: ${result.error}`); // narrowed to { ok: false; error: string }
}

// Zod-style schema → derived type (no duplication)
import { z } from "zod";

const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1).max(100),
  email: z.string().email(),
  age: z.number().int().min(0).max(150).optional(),
  role: z.enum(["admin", "user", "guest"]),
});

// Derive the TypeScript type from the schema
type User = z.infer<typeof UserSchema>;
// { id: string; name: string; email: string; age?: number; role: "admin" | "user" | "guest" }

function createUser(raw: unknown): User {
  return UserSchema.parse(raw); // throws if invalid
}

interface AppState {
  count: number;
  message: string;
}

type AppAction =
  | { type: "increment"; amount: number }
  | { type: "decrement"; amount: number }
  | { type: "setMessage"; message: string }
  | { type: "reset" };

function reducer(state: AppState, action: AppAction): AppState {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + action.amount };
    case "decrement":
      return { ...state, count: state.count - action.amount };
    case "setMessage":
      return { ...state, message: action.message };
    case "reset":
      return { count: 0, message: "" };
  }
}

// BAD — any silently disables all type safety
function parseConfig(raw: any) {
  return raw.database.host; // No error even if raw is null
}

// GOOD — unknown forces runtime checks
function parseConfig(raw: unknown): { host: string; port: number } {
  if (
    typeof raw === "object" && raw !== null &&
    "database" in raw &&
    typeof (raw as any).database?.host === "string"
  ) {
    const db = (raw as { database: { host: string; port: number } }).database;
    return db;
  }
  throw new Error("Invalid config shape");
}

// BEST — use a validation library
// const config = ConfigSchema.parse(raw);

// BAD — T is unused, just makes the signature confusing
function logValue<T>(value: T): void {
  console.log(value);
}
// GOOD — no generic needed
function logValue(value: unknown): void {
  console.log(value);
}

// BAD — generic is always forced to one type anyway
function fetchUser<T extends User>(id: string): Promise<T> { ... }
// GOOD — just return the concrete type
function fetchUser(id: string): Promise<User> { ... }

// GOOD use of generics — T connects input to output
function pluck<T, K extends keyof T>(items: T[], key: K): T[K][] {
  return items.map(item => item[key]);
}

// PITFALL 1: Numeric enums accept any number
enum Priority { Low, Medium, High }
const p: Priority = 42; // Compiles fine! No type error.

// PITFALL 2: const enums break with isolatedModules
const enum Dir { Up, Down } // Error with isolatedModules

// PITFALL 3: Enums are not tree-shakeable
enum Color { Red, Green, Blue }
// Compiles to a runtime object — bundlers cannot remove unused members

// ALTERNATIVE: Use string literal unions
type Priority = "low" | "medium" | "high";
const p: Priority = "low";
// p = "whatever"; // Error — properly type-safe

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

// BAD: assertion — no runtime check, crashes if wrong
const user = JSON.parse(rawJson) as User;
console.log(user.email.toUpperCase()); // Runtime crash if email is missing

// GOOD: type guard — verifies at runtime
function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value &&
    "email" in value
  );
}

const data = JSON.parse(rawJson);
if (isUser(data)) {
  console.log(data.email.toUpperCase()); // Safe
} else {
  console.error("Invalid user data");
}

// These all cause implicit any errors with noImplicitAny:

// Function parameters without annotations
function greet(name) { // Error: Parameter 'name' implicitly has 'any' type
  return `Hello, ${name}`;
}

// Destructured parameters
function render({ title, body }) { // Error on both
  return `<h1>${title}</h1><p>${body}</p>`;
}

// Fix: always annotate function parameters
function greet(name: string) {
  return `Hello, ${name}`;
}

function render({ title, body }: { title: string; body: string }) {
  return `<h1>${title}</h1><p>${body}</p>`;
}

interface Config {
  readonly apiKey: string;
  readonly maxRetries: number;
}

const config: Config = { apiKey: "secret", maxRetries: 3 };

// TypeScript prevents this:
// config.apiKey = "changed"; // Error

// But at runtime, nothing stops this:
(config as any).apiKey = "changed"; // Works at runtime!
console.log(config.apiKey); // "changed"

// For real immutability, use Object.freeze:
const safeConfig = Object.freeze({ apiKey: "secret", maxRetries: 3 });
// safeConfig.apiKey = "x"; // Runtime TypeError + compile error

interface Cat {
  name: string;
  purr(): void;
}

interface Robot {
  name: string;
  purr(): void;
}

// These are the SAME type to TypeScript!
const robot: Robot = { name: "RoboCat", purr() { console.log("bzzz"); } };
const cat: Cat = robot; // No error — shapes match

// Excess property checking only works on object literals:
const direct: Cat = {
  name: "Whiskers",
  purr() {},
  // batteries: true, // Error: Object literal may only specify known properties
};

// But NOT on variables:
const obj = { name: "X", purr() {}, batteries: true };
const sneaky: Cat = obj; // No error — extra properties allowed from variables