5. Modelos: contratos para entender los datos¶

Qué son, para qué sirven y cómo conectan frontend y API.

Modelo TypeScript¶

ng g i models/student model     # genera student.model.ts

src/app/models/student.model.ts

export interface Student {
  id: number;
  name: string;
  email: string;
  active: boolean;
}

Elemento	Qué hace
Interface	Describe la forma esperada de un objeto
Propiedades	Nombran los datos disponibles
Tipos	Indican qué valor acepta cada propiedad
No genera HTML	Su función es representar información

¿Para qué sirve un modelo?¶

Hace explícito el contrato de datos que usa la aplicación.
Permite autocompletado y detecta errores antes de ejecutar.
Evita objetos ambiguos y propiedades escritas de forma diferente.
Sirve como vocabulario común entre componente, servicio y API.

const s: Student = { id: 1, name: 'Ana', email: 'ana@javeriana.edu.co' };
//    ^^^^^^^ Error al compilar: falta la propiedad 'active'

console.log(s.mail);
//            ^^^^ Error al compilar: 'mail' no existe en Student. ¿Quisiste decir 'email'?

En JavaScript ambos errores aparecerían como undefined en la pantalla del usuario; con el modelo, el editor los marca en rojo mientras escribimos.

Conectar frontend y API¶

El modelo es el espejo del DTO que expone el backend (ver DTO). Los nombres de las propiedades deben coincidir exactamente con el JSON:

JSON que devuelve la APIDTO en SpringModelo en Angular

{ "id": 1, "name": "Ana", "email": "ana@javeriana.edu.co", "active": true }

public class StudentDto {
    private Long id;
    private String name;
    private String email;
    private boolean active;
}

export interface Student {
  id: number;
  name: string;
  email: string;
  active: boolean;
}

Modelos derivados¶

Al crear un estudiante todavía no existe el id: el backend lo generará. En lugar de duplicar la interfaz, se deriva:

src/app/models/student.model.ts

export type NewStudent = Omit<Student, 'id'>;
// equivale a { name: string; email: string; active: boolean; }

Este tipo lo usaremos en el servicio y en el formulario.

¿interface o class?

Para describir datos que llegan como JSON se usa interface: no genera código JavaScript y no necesita new. Una class se reserva para objetos con comportamiento (métodos) propio.

Idea clave

El modelo no guarda datos por sí solo; describe cómo deben verse los datos que circulan por la aplicación.

Siguiente: Servicios.