Modelos tipados para chat y usuario en TypeScript

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?