Transformando Input en Angular

Al construir componentes, la definición de las interfaces que utilizarán los las aplicaciones a menudo resulta desafiante. Necesitamos considerar la información que debe ser transmitida entre componentes y, en ocasiones, cómo se procesa.

En algunos casos, exponemos interfaces únicamente debido a un contrato interno, pero este no es un enfoque ideal. Por ejemplo, ayer estaba construyendo un artículo sobre el Kendo Scheduler.

Recuerda que si tu deseas prácticar tu inglés, puedes visitar mi blog

En mi ejemplo, desarrollé una aplicación que permite a los usuarios seleccionar fechas de cursos y agregarlas al calendario.

El calendario utiliza el componente Kendo Scheduler, que requiere una interfaz SchedulerEvent para mostrar el evento. En el contexto de mi aplicación, la interfaz clave es 'Course.'

export type Course = {
  id: string;
  start: Date;
  title: string;
  description: string;
  done: boolean;
};

Cuando otros desarrolladores trabajan con el componente, deben esperar pasar un array de cursos.

<courses-schedule [courses]="courses">

Quería mostrar estos cursos en el Kendo Scheduler, pero el contrato con el Kendo Scheduler es ligeramente diferente porque utiliza la interfaz SchedulerEvent.

¿Por qué debo tipar mis cursos como una interfaz SchedulerEvent?

¿Cómo puedo transformar mis cursos en una interfaz SchedulerEvent?

Transformar Entradas

A partir de la versión 16.1.0, Angular introdujo transform, una característica potente y conveniente para transformar propiedades de entrada. Esta función es particularmente útil cuando necesitas transformar datos.

@Input({ transform: toScheduleEvent }) courses: Course[] = [];

La opción transform proporciona un método sencillo para la conversión de datos. Mantendrá la firma con la interfaz de cursos y transformará el curso en la interfaz SchedulerEvent. Hace que el componente sea fácil de usar y simplifica el proceso de conversión de datos de entrada en otras entidades.

Leer más sobre transform

Encapsular SchedulerEvent de Kendo

Tenemos dos objetivos:

1. Continuar exponiendo mi propiedad de entrada course con tipo Course.
2. Transformar las entradas de cursos en SchedulerEvent.

<app-calendar [courses]="courses"></app-calendar>

Usando transform, podemos convertir los datos del curso mientras ocultamos la lógica de asignación necesaria para el programador.

La propiedad de entrada mantiene su tipo, mientras que el transform utiliza la función toScheduleEvent para ejecutar la transformación.

  @Input({ transform: toScheduleEvent }) courses: Course[] = [];

Dentro de la función toScheduleEvent, utilizamos la función map para transformar el curso en la interfaz SchedulerEvent.

function toScheduleEvent(courses: Course[]): SchedulerEvent[] {
  return courses.map(course => ({
    id: course.id,
    title: course.title,
    start: course.start,
    end: new Date(course.start.getTime() + 2 * 60 * 60 * 1000), 
    isAllDay: false
    description: course.description
  }));
}

El código final se ve así:

import { Component, Input } from '@angular/core';
import { SchedulerEvent } from '@progress/kendo-angular-scheduler';

@Component({
  selector: 'app-calendar',
  standalone: true,
  imports: [CommonModule, MonthViewModule, SchedulerModule],
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent {
  @Input({ transform: toScheduleEvent }) courses: Course[] = [];
}

function toScheduleEvent(courses: Course[]): SchedulerEvent[] {
  return courses.map(course => ({
    id: course.id,
    title: course.title,
    start: course.start,
    end: new Date(course.start.getTime() + 2 * 60 * 60 * 1000), 
    isAllDay: false
    description: course.description
  }));

¡Listo! ¡Hemos expuesto la interfaz Course, pero dentro de mi componente, mantengo mi contrato con el Kendo Scheduler sin complicaciones!

Conclusión

¡Listo! Ahora, con esta característica, ahorramos tiempo al no tener que declarar getters, y Angular nos ayuda con un método conveniente para transformar las entradas. Esto simplifica la conversión de datos y demuestra cómo encapsular tipos y convertirlos a otros tipos utilizando la función transform.