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 jeito mais comum: interface pra definir objetos."}],["$","div","1",{"dangerouslySetInnerHTML":{"__html":"

// Interface - a forma clássica\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n  age?: number; // opcional\n  readonly createdAt: Date; // não pode mudar\n}\n\nconst user: User = {\n  id: 1,\n  name: \"Carlos\",\n  email: \"carlos@dev.com\",\n  createdAt: new Date(),\n};\n// user.createdAt = new Date(); // ERRO! readonly\n

"}}],["$","p","2",{"className":"text-gray-300 leading-relaxed mb-6","children":"Type alias faz a mesma coisa, com syntax levemente diferente:"}],["$","div","3",{"dangerouslySetInnerHTML":{"__html":"

// Type alias pra objetos\ntype Product = {\n  id: number;\n  name: string;\n  price: number;\n  category: \"eletronico\" | \"roupa\" | \"comida\";\n};\n\n// Inline type - pra objetos usados uma vez só\nfunction printUser(user: { name: string; age: number }) {\n  console.log(`${user.name} tem ${user.age} anos`);\n}\n

"}}],["$","p","4",{"className":"text-gray-300 leading-relaxed mb-6","children":"Index signatures pra quando as chaves são dinâmicas:"}],["$","div","5",{"dangerouslySetInnerHTML":{"__html":"

// Index signature - chaves dinâmicas\ninterface Dictionary {\n  [key: string]: string;\n}\n\nconst translations: Dictionary = {\n  hello: \"olá\",\n  goodbye: \"tchau\",\n  thanks: \"obrigado\",\n};\n\n// Record - atalho elegante pra index signature\ntype StatusMap = Record<string, boolean>;\n\nconst features: StatusMap = {\n  darkMode: true,\n  notifications: false,\n  beta: true,\n};\n\n// Record com chaves limitadas\ntype Role = \"admin\" | \"user\" | \"guest\";\ntype Permissions = Record<Role, string[]>;\n\nconst perms: Permissions = {\n  admin: [\"read\", \"write\", \"delete\"],\n  user: [\"read\", \"write\"],\n  guest: [\"read\"],\n};\n

"}}],["$","p","6",{"className":"text-gray-300 leading-relaxed mb-6","children":"Objetos aninhados. O cenário mais real de todos:"}],["$","div","7",{"dangerouslySetInnerHTML":{"__html":"

// Objetos aninhados com tipos separados\ninterface Address {\n  street: string;\n  city: string;\n  state: string;\n  zipCode: string;\n}\n\ninterface Company {\n  name: string;\n  address: Address;\n  employees: number;\n}\n\ninterface Employee {\n  id: number;\n  name: string;\n  company: Company;\n  address: Address; // reutiliza o mesmo tipo\n  metadata: Record<string, unknown>; // dados extras flexíveis\n}\n\n// Partial - todas as props viram opcionais\ntype UpdateUser = Partial<User>;\n// Pick - só algumas props\ntype UserPreview = Pick<User, \"id\" | \"name\">;\n// Omit - todas menos algumas\ntype UserWithoutEmail = Omit<User, \"email\">;\n

"}}]]]}]