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?
