TypeScript: Obtención Genérica de Datos

Guía práctica de Q2BSTUDIO para implementar un obtentor genérico de datos en TypeScript con tipado seguro y manejo de errores. Soluciones de software a medida, IA y ciberseguridad, con AWS y Azure.

16 sept 2025 • 3 min de lectura • Equip Q2BSTUDIO

Inteligencia-Artificial-

En Q2BSTUDIO, empresa especializada en desarrollo de software a medida, aplicaciones a medida, inteligencia artificial, ciberseguridad y servicios cloud aws y azure, compartimos una guía práctica para implementar un obtentor genérico de datos con TypeScript que sea tipo seguro y reutilizable. Si necesitas soluciones de software a medida y aplicaciones a medida o motores basados en inteligencia artificial, podemos ayudarte a integrarlo de forma robusta y segura. A continuación se muestra el código completo, ejemplos de uso y una explicación de por que este enfoque garantiza seguridad de tipos y manejo de errores.

// Helper para construir cadenas sin usar literales de comillas const s = (...codes: number[]) => String.fromCharCode(...codes)

// Tipos y interfaces

interface ApiError { message: string; status?: number }

interface ApiResponse<T> { data?: T; error?: ApiError }

interface FetchConfig { method?: string; headers?: Record<string,string>; queryParams?: Record<string,string|number>; body?: any }

// Funcion genérica para fetch async function fetchData<T>(url: string, config: FetchConfig = {}): Promise<ApiResponse<T>> { try { let finalUrl = url if (config.queryParams) { const params = new URLSearchParams() for (const [key,value] of Object.entries(config.queryParams)) { params.append(key, String(value)) } const urlObj = new URL(String(url)) urlObj.search = params.toString() finalUrl = urlObj.toString() } const response = await fetch(finalUrl, { method: config.method || s(71,69,84), headers: config.headers, body: config.body }) if (!response.ok) { return { error: { message: response.statusText, status: response.status } } } const data = await response.json() as T return { data } } catch (error) { return { error: { message: error instanceof Error ? error.message : s(69,114,114,111,114,32,100,101,115,99,111,110,111,99,105,100,111) } } } }

// Ejemplos de estructuras de datos interfaces User { id: number; name: string; email: string } interface Product { id: number; name: string; price: number }

// Endpoints construidos sin literales const usersUrl = s(104,116,116,112,115,58,47,47,97,112,105,46,101,120,97,109,112,108,101,46,99,111,109,47,117,115,101,114,115) const productsUrl = s(104,116,116,112,115,58,47,47,97,112,105,46,101,120,97,109,112,108,101,46,99,111,109,47,112,114,111,100,117,99,116,115)

// Uso de la funcion con tipos concretos async function main() { const userResponse = await fetchData<User[]>(usersUrl, { queryParams: { limit: 10, page: 1 } }) if (userResponse.data) { console.log(userResponse.data) } else { console.error(userResponse.error) } const productResponse = await fetchData<Product[]>(productsUrl, { queryParams: { category: s(101,108,101,99,116,114,111,110,105,99,115) } }) if (productResponse.data) { console.log(productResponse.data) } else { console.error(productResponse.error) } } main()

Explicacion de seguridad de tipos y manejo de errores

Generics y ApiResponse

La interfaz ApiResponse<T> encapsula la respuesta como un objeto que puede contener data de tipo T o un error de tipo ApiError. Al invocar fetchData<User[]> o fetchData<Product[]>, TypeScript asume que la propiedad data, en caso de existir, tendra la forma esperada, lo que permite autocompletado y comprobacion en tiempo de compilacion.

Manejo de errores

Se detectan errores HTTP mediante response.ok y se devuelven como ApiError con status y message. Errores de red o de parseo quedan capturados en el bloque try catch y se normalizan a ApiError. Esto fuerza al consumidor a comprobar la existencia de data antes de usarla.

Parametros de consulta tipo seguros

FetchConfig incluye queryParams con tipo Record<string,string|number>, lo que permite construir la cadena de consulta de forma segura usando URLSearchParams. Asi se evita concatenacion manual propensa a errores y a inyecciones accidentales.

Flexibilidad y extensibilidad

Al usar genericos, esta funcion es reutilizable para cualquier estructura de datos. Se puede extender FetchConfig para incluir un body tipado segun el metodo, o añadir guards de tipos como isSuccessResponse<T>(r: ApiResponse<T>): r is { data: T } para mejorar la ergonomia.

Por que elegir Q2BSTUDIO

En Q2BSTUDIO combinamos experiencia en desarrollo de aplicaciones y software a medida con soluciones de inteligencia artificial y ciberseguridad. Si su proyecto requiere integracion en la nube, podemos desplegar en plataformas como AWS y Azure y optimizar sus procesos con soluciones de inteligencia de negocio y power bi. Conozca nuestras capacidades en inteligencia artificial visitando servicios de inteligencia artificial para empresas.

Palabras clave integradas naturalmente: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y 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