Manejo de valores inesperados de API en React con tipos de unión y never

Descubre cómo evitar valores inesperados de la API con TypeScript: roles admin, editor y viewer, exhaustividad con never y validación en runtime para UI robusta.

11 sept 2025 • 2 min de lectura • Equip Q2BSTUDIO

Inteligencia-Artificial-

Contexto y problema: cuando en una aplicación definimos un tipo de unión estricto como UserRole igual a admin | editor | viewer y la API devuelve un valor inesperado como super-admin, la interfaz puede comportarse de forma impredecible. Sin TypeScript el componente puede renderizar un mensaje por defecto como Unknown Role sin advertencias en tiempo de compilación y el fallo llega solo en runtime.

Sin TypeScript: riesgo práctico. En bibliotecas como React, un switch sobre role con casos para admin, editor y viewer y un default que muestra Unknown Role permite que un valor externo no contemplado rompa la experiencia de usuario sin que el compilador avise.

Con TypeScript y never: manejo más seguro. Definir type UserRole igual a admin | editor | viewer fuerza el tipado. En el switch podemos añadir un default que realiza una comprobación exhaustiva asignando role a una variable de tipo never, por ejemplo const _exhaustive: never = role; return _exhaustive; De este modo el compilador avisa si aparece un nuevo caso no manejado y se evita que un valor inesperado pase desapercibido.

Validación antes de asignar: buena práctica. Implementar una función validateRole que reciba role como string y devuelva UserRole o null permite filtrar respuestas de backend. Si validateRole devuelve null podemos aplicar un fallback seguro como viewer o tratar el error de forma adecuada. Esta validación protege frente a APIs erróneas y complementa las garantías estáticas de TypeScript.

Ejemplo de flujo recomendado: 1) validar la respuesta de la API con una función que compare role con los valores permitidos, 2) tipar los props del componente con UserRole para aprovechar la comprobación exhaustiva con never, 3) definir un fallback razonable y registrar alertas o métricas cuando la API devuelva valores inesperados.

Cómo ayuda Q2BSTUDIO: en Q2BSTUDIO desarrollamos soluciones robustas y escalables y aplicamos estas buenas prácticas en proyectos de aplicaciones a medida y software a medida. Integramos validaciones y tipado estricto en el backend y frontend para minimizar fallos en producción y mejorar la experiencia de usuario. Si necesitas aplicaciones a medida confiables, nuestro equipo ofrece desarrollo a medida, pruebas y despliegue en entornos cloud.

Servicios complementarios y palabras clave: además de desarrollo, ofrecemos inteligencia artificial, ia para empresas y agentes IA para automatizar decisiones, ciberseguridad y pentesting para proteger tus sistemas, servicios cloud aws y azure para escalabilidad y resiliencia, y servicios inteligencia de negocio y power bi para obtener insights accionables. Con soluciones de inteligencia artificial adaptadas a cada caso y controles de seguridad sólidos garantizamos implementaciones seguras y eficientes. Conoce nuestras capacidades en inteligencia artificial en Inteligencia artificial.

Resumen: sin TypeScript los valores inesperados de la API rompen silenciosamente la UI; con TypeScript una unión combinada con never obliga a manejar todos los casos; y la validación en runtime actúa como última línea de defensa. Estas prácticas forman parte del desarrollo profesional que aplicamos en Q2BSTUDIO para proyectos de software a medida, proyectos de inteligencia artificial, ciberseguridad, servicios cloud aws y azure y business intelligence con power bi.

UNA PAUSA?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Intel·ligència artificial

Agents d'IA, chatbots i assistents intel·ligents que automatitzen tasques i atenen els teus clients 24/7 per millorar l'eficiència del teu negoci.

Més info

Desenvolupament de programari

Aplicacions web, mòbils i d'escriptori, intranets, e-commerce, SaaS i plataformes de gestió dissenyades per a les necessitats concretes de la teva empresa.

Més info

Serveis cloud

Migració, infraestructura, hosting gestionat, alta disponibilitat i seguretat en Microsoft Azure i Amazon Web Services perquè el teu negoci escali sense límits.

Més info

Ciberseguretat i pentesting

Auditories de seguretat, test d'intrusió (pentesting) i protecció d'aplicacions, dades i infraestructura on-premise i cloud, amb hacking ètic i compliment normatiu.

Més info

Business Intelligence

Quadres de comandament i anàlisi de dades amb Power BI: integrem les teves fonts, dissenyem dashboards i KPIs i convertim les teves dades en decisions.

Més info

Automatització de processos

Automatitzem tasques repetitives i connectem les teves aplicacions amb n8n, Power Automate, Make i RPA, eliminant treball manual i augmentant la productivitat.

Més info

Formació per a empreses

Formem els teus equips en tecnologia amb criteri: desenvolupament web, bases de dades, Git, bones pràctiques i seguretat, automatització amb n8n, intel·ligència artificial per a empreses i creació de solucions d'IA amb Azure AI Foundry.

Més info

Auditoria de codi

Auditem el codi que creguis tu, el teu equip o una IA: et diem què està bé i què millorar, el securitzem i el deixem llest per a producció, web o app.

Més info

Generació d'imatges amb IA

Creem per tu les imatges que necessita el teu negoci amb intel·ligència artificial: producte, xarxes, publicitat, il·lustració i avatars. Tu ens dius què vols i t'ho lliurem llest per fer servir.

Més info

Generació de vídeos amb IA

Creem per tu vídeos amb intel·ligència artificial: promocionals, per a xarxes, presentadors virtuals, doblatge i animacions. Ens comptes la idea i t'ho lliurem muntat i llest per publicar.

Més info

Avatars conversacionals amb IA

Creem avatars conversacionals amb IA —humans digitals amb cara i veu— que atenen els teus clients i equips amb el coneixement de la teva empresa, a la teva web, monitors interactius, WhatsApp o Teams.

Més info

Màrqueting Online i IA

Google Ads, Meta Ads, LinkedIn Ads i posicionament en motors d'IA (GEO/AEO): captem clients i fem que la teva marca aparegui on et busquen, també a ChatGPT, Gemini i Perplexity.

Més info

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.

Live Chat