2f:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplos Práticos"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Começando pelo numeric enum, o tipo padrão:"}],["$","div","1",{"dangerouslySetInnerHTML":{"__html":"

// Numeric enum - valores começam em 0\nenum Direction {\n  Up,    // 0\n  Down,  // 1\n  Left,  // 2\n  Right, // 3\n}\n\n// Você pode definir o valor inicial\nenum HttpStatus {\n  OK = 200,\n  Created = 201,\n  BadRequest = 400,\n  NotFound = 404,\n  ServerError = 500,\n}\n\nfunction handleResponse(status: HttpStatus) {\n  if (status === HttpStatus.OK) {\n    console.log(\"Tudo certo!\");\n  }\n}\n\nhandleResponse(HttpStatus.OK); // funciona\n// handleResponse(999); // ERRO! não faz parte do enum\n

"}}],["$","p","2",{"className":"text-gray-300 leading-relaxed mb-6","children":"String enums. Bem mais legíveis nos logs e no debug:"}],["$","div","3",{"dangerouslySetInnerHTML":{"__html":"

// String enum - cada membro tem valor string\nenum OrderStatus {\n  Pending = \"PENDING\",\n  Processing = \"PROCESSING\",\n  Shipped = \"SHIPPED\",\n  Delivered = \"DELIVERED\",\n  Cancelled = \"CANCELLED\",\n}\n\ninterface Order {\n  id: number;\n  status: OrderStatus;\n  total: number;\n}\n\nconst order: Order = {\n  id: 1,\n  status: OrderStatus.Pending,\n  total: 299.90,\n};\n\n// No console: { id: 1, status: \"PENDING\", total: 299.9 }\n// Muito mais legível que ver o número 0\n

"}}],["$","p","4",{"className":"text-gray-300 leading-relaxed mb-6","children":"Const enum: zero impacto no bundle."}],["$","div","5",{"dangerouslySetInnerHTML":{"__html":"

// Const enum - desaparece na compilação\nconst enum Color {\n  Red = \"RED\",\n  Green = \"GREEN\",\n  Blue = \"BLUE\",\n}\n\nconst cor = Color.Red;\n// No JavaScript compilado: const cor = \"RED\";\n// O enum some completamente. Só fica o valor inline.\n\n// Reverse mapping - só funciona com numeric enums\nenum Role {\n  Admin,  // 0\n  User,   // 1\n  Guest,  // 2\n}\n\nconsole.log(Role.Admin);  // 0\nconsole.log(Role[0]);     // \"Admin\" (reverse mapping)\nconsole.log(Role[1]);     // \"User\"\n

"}}],["$","p","6",{"className":"text-gray-300 leading-relaxed mb-6","children":"Enum vs union type. A comparação que todo mundo quer ver:"}],["$","div","7",{"dangerouslySetInnerHTML":{"__html":"

// Abordagem com enum\nenum Theme {\n  Light = \"light\",\n  Dark = \"dark\",\n  System = \"system\",\n}\n\n// Abordagem com union type (mais leve)\ntype Theme2 = \"light\" | \"dark\" | \"system\";\n\n// As duas funcionam como tipo\nfunction setTheme(theme: Theme) { /* ... */ }\nfunction setTheme2(theme: Theme2) { /* ... */ }\n\n// Diferença: enum gera JavaScript, union não\n// Union é só tipagem - desaparece 100% na compilação\n\n// Quando enum ganha:\n// - Precisa iterar sobre os valores\n// - Quer reverse mapping\n// - Valores são usados em runtime (switch, comparação)\n\n// Quando union ganha:\n// - Lista simples, poucas opções\n// - Bundle size importa\n// - Só precisa de checagem de tipo\n

"}}]]]}]