POLITICA DE COOKIES

Q2BSTUDIO.COM utiliza cookies técnicas, analíticas, de sesión y de publicidad con la finalidad de prestar un mejor servicio. No obstante, necesitamos su consentimiento explícito para poder utilizarlas. Así mismo puede cambiar la configuración de las cookies u obtener más información aquí .

TypeScript: Obtención Genérica de Datos

Guía práctica para implementar un obtenedor de datos genérico y seguro con TypeScript

Publicado el 16/09/2025

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.

Fin del artículo, inicio de la diversión
Construyendo software juntos

Dando vida a tus ideas desde 2008

Diseñamos aplicaciones móviles y de escritorio innovadoras que cumplen con tus requisitos específicos y mejoran la eficiencia operativa.
Más info
Cuéntanos tu visión
Sea cual sea el alcance, podemos convertir tu idea en realidad. Envíanosla y charlemos sobre tu proyecto o una colaboración futura.
Contáctanos
artículos destacados
Live Chat
Enviado correctamente.

Gracias por confiar en Q2BStudio