TypeScript i React per a projectes amb IA: eficiència en frontend i backend

Construir aplicacions amb IA no consisteix només a connectar una API i mostrar text a la pantalla. Es tracta de gestionar la incertesa. Respostes que arriben per parts, estructures que canvien, errors que no s’assemblen als d’un backend convencional, etc. TypeScript i React, ben combinats, són una de les respostes més sòlides a aquest repte. Al llarg d’aquest article analitzem com abordar els principals desafiaments que apareixen en desenvolupar aquest tipus d’aplicacions.

El problema del tipatge quan la IA genera dades no deterministes

Els models de llenguatge no retornen sempre la mateixa estructura. Una resposta pot incloure camps opcionals, arrays buits o text lliure allà on esperaves un objecte. Sense tipatge, aquests casos es converteixen en errors silenciosos en producció.

TypeScript obliga a definir contractes explícits entre el model i l’aplicació. Per a respostes d’LLM amb structured outputs o tool calls, una combinació de Zod per a la validació en temps d’execució i tipus derivats amb z.infer<> cobreix bé la majoria dels casos.

Això no elimina la imprevisibilitat del model, però sí que la conté. Si la resposta no encaixa amb l’esquema definit, l’error és explícit i controlat. No es converteix en un "undefined is not a function" tres capes més avall.

Gestió de l’estat a React quan la font de dades és un model d’IA

L’streaming de tokens trenca el model mental habitual de “petició → resposta”. L’estat deixa de ser binari (carregant / llest) i passa a tenir diferents fases: connectant, rebent dades, completat, cancel·lat i error parcial.

useReducer acostuma a encaixar millor que useState per a aquest tipus de màquines d’estat.

Per gestionar cancel·lacions, l’API de Streams combinada amb AbortController és l’enfocament estàndard. TanStack Query aporta valor en fluxos amb memòria cau o revalidació. Tanmateix, per a casos d’streaming pur, sovint és més senzill gestionar l’estat localment. La clau és modelar explícitament els estats intermedis en lloc de reduir-los a un únic booleà isLoading.

Arquitectura frontend-backend amb TypeScript end-to-end

Quan el backend també està desenvolupat amb TypeScript, compartir tipus entre client i servidor elimina una categoria sencera d’errors. Hi ha dues aproximacions habituals:

• Monorepo amb paquet compartit. Un mòdul packages/types que importen tant el frontend com el backend. Simple i directe.
• tRPC. Defineix els endpoints com a funcions tipades al servidor i el client els consumeix amb inferència de tipus i autocompletat complets, sense necessitat de generar codi.

En projectes amb múltiples integracions d’IA, on els contractes entre capes canvien sovint, aquesta coherència end-to-end redueix dràsticament el temps de depuració. Un canvi en el tipus de resposta del model es converteix en un error de compilació molt abans d’arribar a producció.

NestJS com a backend per orquestrar models i integracions d’IA

NestJS aporta estructura allà on els projectes d’IA tendeixen al caos. El seu sistema d’injecció de dependències permet encapsular la lògica de cada proveïdor (Anthropic, OpenAI o models propis) en serveis intercanviables.

Això fa que els serveis d’IA siguin fàcilment testejables de manera aïllada i estiguin desacoblats de la resta de l’aplicació. La gestió del context de conversa, la memòria i les plantilles de prompts encaixen especialment bé en aquest model. Un ConversationService pot mantenir l’historial, un PromptBuilder generar el missatge final i un controlador HTTP coordinar tot el flux.

Testing de components React que consumeixen IA

Fer mock d’un LLM als tests no és opcional. Les respostes reals són lentes, variables i tenen un cost econòmic. L’estratègia més efectiva és separar les proves per capes:

• Tests unitaris: simular el servei d’IA amb respostes predefinides. Verificar que el component es comporta correctament davant de respostes lentes, errors de límit de peticions (rate limit) o contingut inesperat.
• Tests d’integració: utilitzar un servidor simulat, com MSW, per reproduir l’streaming token a token.
• Tests end-to-end amb Playwright: interceptar les crides a l’API real i substituir-les per fixtures. Això permet validar fluxos complets sense dependre de la disponibilitat del model.

Els casos més importants no són els happy paths, sinó comprovar com es comporta la interfície quan una resposta triga vuit segons a arribar, arriba parcialment o simplement no arriba.

Rendiment en interfícies amb streaming i respostes en temps real

Renderitzar cada token rebut com un nou re-render de React és una de les maneres més ràpides de bloquejar la interfície. Algunes tècniques que marquen la diferència són:

• Batching d’actualitzacions. Acumular tokens en un buffer i actualitzar l’estat cada ~100 ms en lloc de fer-ho amb cada token rebut.
• useDeferredValue. Separar les actualitzacions de l’entrada de les actualitzacions del contingut mostrat.
• Virtualització. En converses llargues, eines com React Virtual o TanStack Virtual eviten renderitzar missatges que no són visibles dins del viewport.
• Memoització selectiva. Utilitzar React.memo per als missatges històrics que ja no canviaran.

El coll d’ampolla rarament es troba en l’execució de JavaScript. Gairebé sempre està relacionat amb quantes vegades React decideix tornar a renderitzar l’arbre de components.

TypeScript i React en projectes de modernització amb IA

Aquesta combinació no és útil només en projectes nous. En processos de modernització d’aplicacions legacy, TypeScript actua com una xarxa de seguretat. Permet incorporar mòduls d’IA de manera incremental sense trencar la resta del sistema. Els tipus documenten contractes implícits que, en el codi heretat, sovint només existien al cap de la persona que el va escriure.

Connectat amb la resta de la cadena de modernització (documentació automàtica d’APIs, automatització amb Power Automate i testing amb Playwright, TypeScript end-to-end es converteix en el teixit connectiu que permet que totes les peces es comuniquin sense friccions.

Si estàs valorant com incorporar IA al teu stack tecnològic o modernitzar una aplicació existent, contacta amb nosaltres. Podem fer una revisió inicial per identificar els punts d’entrada més adequats per al teu cas.