Menu
CoddyTech

Proyecto: Definir la estructura Task

Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 45 de 73.

¡Te damos la bienvenida a tu primer proyecto de TypeScript! Durante las próximas lecciones, crearás una aplicación completa de lista de tareas que demuestra cómo TypeScript ayuda a crear código bien estructurado y seguro en cuanto a tipos. Este proyecto combinará muchos de los conceptos que has aprendido hasta ahora: interfaces, tipos literales, matrices y funciones.

La base de cualquier sistema de gestión de tareas es definir cómo es una tarea. En esta lección, crearás la estructura de datos que representa una sola tarea en tu aplicación. Esta estructura debe capturar la información esencial: un identificador único, de qué trata la tarea y su estado actual.

Tu interfaz Task usará tipos literales para la propiedad de estado, lo que significa que el estado solo puede ser uno de algunos valores de cadena específicos, como 'todo', 'in-progress' o 'done'. Este enfoque evita errores tipográficos y garantiza la coherencia en toda tu aplicación: TypeScript detectará cualquier intento de usar un valor de estado no válido.

Esta estructura del proyecto servirá como plano para toda la funcionalidad que desarrollarás en las próximas lecciones, incluida la incorporación de nuevas tareas, la actualización de su estado y el filtrado de tareas según su estado actual.

challenge icon

Desafío

Fácil

Crea una interfaz llamada Task con las siguientes propiedades:

  • id de tipo number
  • title de tipo string
  • status, que solo puede ser uno de estos valores literales: 'todo', 'in-progress' o 'done'

Usando tu interfaz Task, crea las siguientes variables:

  • Crea una variable llamada firstTask de tipo Task con id 1, título "Learn TypeScript interfaces" y estado 'todo'
  • Crea una variable llamada secondTask de tipo Task con id 2, título "Build task management app" y estado 'in-progress'
  • Crea una variable llamada thirdTask de tipo Task con id 3, título "Write unit tests" y estado 'done'

Crea una función llamada getTaskInfo que acepte un parámetro de tipo Task y devuelva un string con el formato "Task [id]: [title] - [status]".

Imprime las siguientes salidas en líneas separadas:

  • Llama a getTaskInfo con firstTask e imprime el resultado
  • Llama a getTaskInfo con secondTask e imprime el resultado
  • Llama a getTaskInfo con thirdTask e imprime el resultado
  • Imprime el estado de firstTask
  • Imprime el título de secondTask

Pruébalo tú mismo

// TODO: Escribe tu código aquí

// Crea la interfaz Task


// Crea las variables task


// Crea la función getTaskInfo


// Imprime las salidas requeridas
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Introducción a TypeScript

Practica por tu cuenta: Playground de TypeScript