El tipado fuerte en Type Script potencia la calidad del código: permite modelos claros, ayuda a Visual Studio Code con autocompletado y valida que datos y estados viajen correctamente entre componentes y services. Aquí se definen, de forma práctica, los modelos de usuario, mensaje y conversación de chat, y cómo tiparlos en los componentes.
¿Cómo definir modelos tipados en Type Script para chat y usuario?
Los modelos viven en la ruta de Source, App, Models. Se crean dos grupos: chat (mensaje y conversación) y usuario. La prioridad es asegurar identificadores únicos, campos mínimos para renderizar y estados claros para la UI.
- Mensaje individual: incluye un ID único, el ID del usuario, el contenido de texto, la fecha de envío como objeto date, el tipo de rol (usuario o asistente) y un estado del envío..
- Estados del mensaje: enviando, enviado, error y temporal. Permiten controlar la visualización y el flujo de envío..
- Conversación de chat: un array de mensajes con un ID de conversación, usuarioId, fecha de creación, última actividad y título. Sirve para identificar en la base de datos..
- Usuario: unique ID, email, nombre, URL de foto, fecha de creación y última conexión. Luego se mapea a lo que necesita Firebase para loguear con Google dentro del service de autenticación..
Ejemplo en TypeScript, con nombres en español como se describen:
// Enumerados para roles y estados del mensaje enum TipoMensaje { Usuario = 'usuario', Asistente = 'asistente', } enum EstadoMensaje { Enviando = 'enviando', Enviado = 'enviado', Error = 'error', Temporal = 'temporal', } // Mensaje individual de chat interface MensajeChat { id: string; // ID único usuarioId: string; // Relación con el usuario contenido: string; // Texto del mensaje fechaEnvio: Date; // date ya formateado tipo: TipoMensaje; // usuario | asistente estado: EstadoMensaje; // enviando | enviado | error | temporal } // Conversación de chat interface ConversacionChat { id: string; // ID de la conversación usuarioId: string; // Dueño de la conversación mensajes: MensajeChat[]; // Array de mensajes fechaCreacion: Date; // Fecha de creación de la conversación ultimaActividad: Date; // Última actividad titulo: string; // Título para identificar en BD } // Usuario (se mapeará en el service de autenticación a Firebase) interface Usuario { id: string; // unique ID email: string; // Correo asociado nombre: string; // Nombre visible urlFoto: string; // URL de foto fechaCreacion: Date; // Alta del usuario ultimaConexion: Date; // Último acceso }
¿Cómo tipar componentes e importar interfaces en Visual Studio Code?
Al ajustar el componente de chat, se tipa el usuario y la lista de mensajes con las interfaces anteriores. Al inicio, el usuario puede ser nulo; por eso se declara como unión.
// En el componente de chat let usuario: Usuario | null = null; // Puede iniciar en null let mensajes: MensajeChat[] = []; // Lista tipada de mensajes
- Usa Control + barra espaciadora en Visual Studio Code para importar automáticamente las interfaces..
- Declara el usuario como
Usuario | null cuando se asigne null al comienzo. Evita errores de inicialización..
- Tipar
mensajes como MensajeChat[] asegura que cada elemento cumpla campos, roles y estados..
- Al “taquear” o recorrer mensajes, el tipado guía el acceso seguro a propiedades..
¿Cómo se integran modelos y services con Firebase y componentes?
Los modelos se usan extensamente en los services. En particular, el de autenticación mapea el modelo de Usuario (con nombres en español) a lo que requiere Firebase para el login con Google. Luego, los services se integran en los componentes para orquestar creación de conversaciones, envío de mensajes y actualización de estados.
- Mapeo al proveedor: el service traduce campos locales al formato que espera Firebase..
- Consistencia end-to-end: los modelos garantizan que los datos viajen bien entre UI, services y base de datos..
- Mantenibilidad: cambios en estados o campos se controlan desde un único lugar tipado..
¿Te gustaría comentar cómo tiparías otros estados o qué campos agregarías al historial de conversación?
