Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Curso de Angular: Creación de Aplicaciones Web

Contenido del curso

Introducción a Angular y Fundamentos

Estructuras de control en Angular

Alistando tu aplicación para producción

Componentes Reutilizables y Comunicación

Ciclo de vida de los componentes

Mejorando la interfaz del producto

Integración y Datos

Enrutamiento y Navegación

Perfeccionando tu e-commerce

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:48

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Curso de Angular: Creación de Aplicaciones Web

Clase 12 de 71

Clase 12 / 71

Recursos

La gestión de datos en el desarrollo de aplicaciones es fundamental para asegurar la integridad y la lógica del negocio. El uso de arrays y objetos para almacenar y manipular datos es común, pero requiere de un enfoque estructurado para evitar errores comunes y asegurar prácticas adecuadas. En este artículo, vamos a explorar cómo establecer una estructura de datos adecuada en nuestra aplicación utilizando TypeScript y cómo mejorar la gestión de tareas a través del tipado de datos.

¿Qué es un array de strings y cómo se relaciona con los objetos?

En programación, un array puede contener diferentes tipos de valores, incluyendo strings y números, que son ejemplos de valores primitivos. Un array también puede contener objetos, que son estructuras más complejas que incluyen diferentes propiedades.

Ejemplo de un objeto y un array mixto

Pongamos como ejemplo un array que representa una lista de tareas. Cada tarea puede tener propiedades como:

Identificador (ID)
Título (title)
Estado de completado (completed)

¿Por qué es importante la consistencia en las estructuras de datos de un array?

La consistencia de datos es crucial para mantener la claridad del código y evitar errores. Un array que contiene diferentes tipos de datos (strings, números, objetos) no se considera una buena práctica si se espera que contenga una lista de elementos con la misma estructura.

La solución: Uso de interfaces

Para mantener un array consistente, especialmente cuando se trabaja con un conjunto complejo de datos como objetos, se utiliza una interfaz en TypeScript. Esta interfaz definirá la estructura que cada objeto dentro del array debe cumplir.

¿Cómo crear y usar una interfaz en TypeScript para mejorar la manipulación de datos?

Crear una interfaz en TypeScript es sencillo y aporta claridad y robustez al código. Generalmente, estas interfaces se almacenan en una carpeta llamada models. Por ejemplo, para el array de tareas, la interfaz podría incluir propiedades como:

id: number
title: string
completed: boolean

Implementación de la interfaz

Una vez creada la interfaz, la importamos donde será usada para luego aplicarla al array de tareas. Esto se hace especificando que el array debe contener elementos que cumplan con la estructura de la interfaz.

¿Cuáles son los beneficios de tipar un array con una interfaz?

Al tipar un array con una interfaz específica, cualquier intento de añadir un elemento que no cumpla con la estructura definida resultará en un error. Esto ofrece varias ventajas:

Evita la inserción de datos inconsistentes.
Facilita el mantenimiento del código.
Mejora la calidad de la aplicación al prevenir posibles fallos.

¿Cómo manejar objetos dentro de un array tipado en una aplicación?

Cuando trabajamos con un array de objetos tipados, accedemos a sus propiedades directamente y TypeScript nos proporciona ayuda en tiempo de compilación. Si intentamos acceder a una propiedad que no existe en la interfaz del objeto, TypeScript nos alertará del error.

Adaptaciones en métodos

Cuando implementamos el tipado en un array, es probable que tengamos que adaptar algunos métodos. Por ejemplo, al agregar una tarea nueva, debemos asegurarnos de que esta cumpla con la estructura definida por la interfaz, incluyendo un identificador único, un título y un estado de completado.

Reto: Implementación de la funcionalidad de actualización

Una vez que hemos logrado agregar y eliminar tareas con éxito mientras mantenemos la integridad de nuestra estructura de datos, el siguiente paso podría ser implementar la funcionalidad de actualización. Un reto interesante sería lograr que al marcar una tarea como completada, el estado de la propiedad completed en el objeto correspondiente se actualice adecuadamente.

El proceso de manejar datos correctamente en aplicaciones es un aspecto clave que garantiza la solidez de nuestros proyectos. Al aplicar buenas prácticas como la creación de interfaces y el tipado correcto de arrays, proporcionamos un marco de trabajo que minimiza los errores y maximiza la eficiencia y mantenibilidad del código.

David Rangel

Hace 2 años

Hice esto con algo de ayuda:

//home.component.html

<section class="todoapp">
  <header class="header">
    <div class="container">
      <h2>My Day</h2>
      <p>All my tasks in one place</p>
      <input
        class="new-todo"
        placeholder="Type new todo"
        autofocus
        name="filterName"
        type="text"
        (keydown)="changeHandler($event)"
        onfocus="this.value=''"
      />
    </div>
  </header>
  <div class="container todoapp-wrapper">
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <ul class="todo-list">

        <li
          *ngFor='let task of tasks(); index as i'
          [ngClass]="{'completed': task.completed}"
        >
          <div class="view">
            <input
              class="toggle"
              type="checkbox"
              [checked]="task.completed"
              (change)="changeTaskStatus(i)"
            />
            <label> {{ task.title }} </label>
            <button class="destroy" (click)="deleteTask(i)"></button>
          </div>
          <input class="edit" value="Learn JavaScript" />
        </li>

        <!-- <li class="editing">
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Make dishes</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Make dishes" />
        </li> -->

      </ul>
    </section>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>0</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a routerLink="/" class="selected">All</a>
        </li>
        <li>
          <a routerLink="/pending">Pending</a>
        </li>
        <li>
          <a routerLink="/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed">Clear completed</button>
    </footer>
  </div>
</section>

//home.component.ts

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

import { Task } from './../../models/task.model'

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})

export class HomeComponent {
  tasks = signal<Task[]>([
    {
      id: Date.now(),
      title: 'Crear proyecto',
      completed: false,
    },
    {
      id: Date.now(),
      title: 'Crear componentes',
      completed: false,
    },
    {
      id: Date.now(),
      title: 'Crear interfaz',
      completed: false,
    },
  ])

  get incompleteTasks() {
    return this.tasks().filter(task => !task.completed);
  }

  get completeTasks() {
    return this.tasks().filter(task => !!task.completed);
  }

  changeHandler(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    if (event.key === 'Enter' && input.value.trim() !== '') {
      const newTask = input.value.trim()
      this.addTask(newTask);
      input.value = '';
    }

  }

  addTask(title: string) {
    const newTask = {
      id: Date.now(),
      title,
      completed: false,
    }
    this.tasks.update((tasks) => [...tasks, newTask]);
  }

  deleteTask(index: number){
    this.tasks.update((task) => task.filter((task, position) => position !== index ))
  }

  changeTaskStatus(index: number) {
    this.tasks.update((tasks) =>
      tasks.map((task, i) =>
        i === index ? { ...task, completed: !task.completed }: task
      )
    )
  }
}

Comentarios (41)41 comentarios

Alejandro Vazquez Vazquez

Brandon Lee Aguero Fernandez

Hace 3 años

Cristian Alexander Salazar Atalaya

Johan Grandas

Max Andy Diaz Neyra

Jazmin Esquivel Flores

Seba Cardoso

Hace 3 meses

Dario Bublitz

Hace 10 meses•editado

Cristian Leiton Valencia

Claudia Canto Flores

Karen Baron

Leonardo Caraballo

Hace un mes•editado

Aprendiz Ada

Hace 8 meses

Raúl Adolfo Sánchez Rodríguez

Hace 9 meses

Jose Alexis Nuñez Torres

Company_admin

Jair Alexander Hernández Rosero

Hace un año

Gabriel Huaman

Introducción a Angular y Fundamentos

Desarrollo de Aplicaciones Modernas con Angular

Creando tu primer proyecto en Angular

Creación de componentes y rutas en Angular para gestión de tareas

String Interpolation en Angular: Transmisión de Datos a Templates

Modificación de Propiedades HTML con Angular: Property Binding

Eventos en Angular: click, doble click y cambio de input

Eventos de Teclado en JavaScript: Uso de KeyDown y Change

Reactividad Granular con Signals en Angular

Reactividad en HTML: Implementación de Signals en JavaScript

Estructuras de control en Angular

Estructuras de Control y Renderizado Dinámico en Angular

Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación

Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing

Actualización de tareas con Angular y programación inmutable

Uso de ngIf y ngFor para control de flujos en Angular

ngIf vs ngSwitch en Angular

Manejo Avanzado de Formularios Reactivos en Angular

Validaciones de Inputs en Formularios Reactivos con Angular

Alistando tu aplicación para producción

Validación de formularios y estilos dinámicos en Angular

Clases dinámicas en Angular sin mover el DOM

Modo edición con doble clic en Angular

Estados Computados en Programación Reactiva con Signals

Persistencia de Tareas con LocalStorage en Angular

ng build para producción en Angular

Desplegar una app Angular en Firebase Hosting

Nueva sintaxis @if y @else en Angular

Sintaxis y rendimiento de for y switch en JavaScript moderno

Migración Automática a Nueva Sintaxis de Angular

Componentes Reutilizables y Comunicación

Creación de Tienda en Línea con Angular y Tailwind CSS

Creación y Organización de Componentes en Angular

Componentes Reutilizables en Angular: Creación y Maquetado de Productos

Uso de Angular DevTools para Debugging en Angular

Inputs en Angular: Comunicación de Datos entre Componentes

Outputs en Angular: Comunicación del Hijo al Padre

Maquetación de Galería de Productos con Tailwind CSS

Ciclo de vida de los componentes

Ciclo de Vida de Componentes en Angular

Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

Ciclo de Vida de Componentes en Angular: Eventos Clave

Detección de Cambios en Inputs con ngOnChange en Angular

Prevención de fugas de memoria con ngOnDestroy en Angular

Creación de un Reproductor de Audio con WaveSurfer.js en Angular

Mejoras de la página About en e-commerce: audio y contador dinámico

Mejorando la interfaz del producto

Componentización y Manejo de Datos en Angular

Creación de Headers en Páginas Web con Angular

Implementación de Interfaz Gráfica para Carrito de Compras Interactivo

Implementación de Reactividad en Carrito de Compras con Angular

Gestión de Carrito de Compras en Angular con ngOnChanges

Gestión de Estado en Angular: Solución al InputDrilling

Gestión de Estado Global en Angular con Servicios y Señales

Inyección de Dependencias en Angular: Conceptos y Prácticas

Integración y Datos

Conexión de Angular a REST API usando Fake Store API de Platzi

Creación de Alias para Imports Cortos en Proyectos JavaScript

Transformación de Datos con Pipes en Angular

Creación y uso de pipes personalizados en Angular

Manipulación de Fechas en Angular con Date Functions

Manipulación del DOM con Directivas en Angular

Deployment de Angular en Vercel

Enrutamiento y Navegación

Creación de Página 404 en Angular: Manejo de Rutas No Encontradas

Implementación de Router Link en Angular para SPA eficiente

Implementación de Layouts Compartidos en Angular para Vistas Anidadas

Uso de RouterLinkActive en Angular para Navegación Activa

Routing en Angular: Creación de Páginas de Detalle de Producto

Consulta dinámica de detalles de producto con Angular y REST API

Galería de Productos Dinámica con Angular y TypeScript

Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa

Perfeccionando tu e-commerce

Filtrado de Productos por Categoría en E-commerce

Filtros de Productos con Query Params en Angular

Optimización de Aplicaciones con Lazy Loading y Code Splitting

Optimización de JavaScript en Angular con Lazy Loading

Optimización de Carga de Chunks con Preloading en Angular

Migración de Angular a Nueva Sintaxis con ng generate

Despliegue de Aplicaciones con Verzal en Entornos Productivos