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.
Desafío
FácilCrea una interfaz llamada Task con las siguientes propiedades:
idde tiponumbertitlede tipostringstatus, 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
firstTaskde tipoTaskcon id1, título"Learn TypeScript interfaces"y estado'todo' - Crea una variable llamada
secondTaskde tipoTaskcon id2, título"Build task management app"y estado'in-progress' - Crea una variable llamada
thirdTaskde tipoTaskcon id3, 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
getTaskInfoconfirstTaske imprime el resultado - Llama a
getTaskInfoconsecondTaske imprime el resultado - Llama a
getTaskInfoconthirdTaske 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 requeridasEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Introducción a TypeScript
1Primeros pasos con TS
¿Qué es TypeScript?¿Por qué usar TypeScript?Tu primer código en TypeScriptProceso de compilación y erroresResumen: Introducción a TS4Trabajando con funciones
Tipado de parámetros y valores de retornoTipado de funciones de flechaEl tipo de retorno 'void'Parámetros opcionales con '?'Valores de parámetros por defectoTipado de parámetros restDefinición de tipos de funcionesRepaso: Construcción de funciones tipadas7Proyecto: Una lista de tareas simple
Proyecto: Definir la estructura TaskFunción para agregar una tarea2Tipos principales
Tipos básicos: str, num, booleanEl tipo 'any': Vía de escapeEl tipo 'unknown'Trabajando con 'null' y 'undef'Inferencia de tipos en acciónAnotaciones de tipo explícitasResumen: Práctica de tipos principales5Tipos: Alias, Uniones e Intersecciones
Alias de tipos para primitivosTipos de unión ('|')Trabajando con tipos de uniónTipos literalesTipos de intersección ('&')Combinando alias de tiposRepaso: Combinaciones de tipos avanzadas3Estructura de datos: Arrays y Tuplas
Arrays tipadosModificador 'readonly' para Arrays¿Qué es una Tupla?Declaración y acceso a TuplasDesestructuración de TuplasTuplas ReadonlyArrays tipados multidimensionalesOperador Spread con ArraysResumen: Arrays y TuplasPractica por tu cuenta: Playground de TypeScript