Функция: Список задач по статусу
Часть раздела Введение в TypeScript путешествия по JavaScript на Coddy. Урок 48 из 73.
Задание
ЛегкоВам предоставлены следующие элементы из предыдущего испытания:
- Интерфейс
Taskс полямиid(число),title(строка) иstatus(литеральный тип) - Три переменные задач:
firstTask,secondTaskиthirdTask - Функция
getTaskInfo - Функция
addTask - Функция
changeTaskStatus - Массивы
initialTasks,updatedTasks,testTasks,progressTasksиcompletedTasks
Создайте функцию с именем listTasksByStatus, которая принимает два параметра:
taskListтипаTask[](массив объектов Task)statusтипа'todo' | 'in-progress' | 'done'(статус для фильтрации)
Функция должна:
- Использовать метод массива
filterдля возврата нового массива, содержащего только те задачи, которые соответствуют указанному статусу - Вернуть отфильтрованный массив задач
Создайте переменную с именем mixedTasks типа Task[], содержащую все три исходные задачи: firstTask, secondTask и thirdTask.
Используйте вашу функцию listTasksByStatus для создания следующих отфильтрованных массивов:
- Отфильтруйте
mixedTasksпо статусу'todo'и сохраните результат вtodoTasks - Отфильтруйте
mixedTasksпо статусу'in-progress'и сохраните результат вinProgressTasks - Отфильтруйте
mixedTasksпо статусу'done'и сохраните результат вdoneTasks
Выведите следующие данные на отдельных строках:
- Выведите длину
mixedTasks - Выведите длину
todoTasks - Выведите длину
inProgressTasks - Выведите длину
doneTasks - Вызовите
getTaskInfoс первой задачей изtodoTasksи выведите результат - Вызовите
getTaskInfoс первой задачей изinProgressTasksи выведите результат - Вызовите
getTaskInfoс первой задачей изdoneTasksи выведите результат
Попробуйте сами
// Task interface and variables from previous challenges
interface Task {
id: number;
title: string;
status: 'todo' | 'in-progress' | 'done';
}
const firstTask: Task = {
id: 1,
title: "Learn TypeScript interfaces",
status: 'todo'
};
const secondTask: Task = {
id: 2,
title: "Build task management app",
status: 'in-progress'
};
const thirdTask: Task = {
id: 3,
title: "Write unit tests",
status: 'done'
};
function getTaskInfo(task: Task): string {
return `Task ${task.id}: ${task.title} - ${task.status}`;
}
function addTask(taskList: Task[], title: string): Task[] {
const newTask: Task = {
id: taskList.length + 1,
title: title,
status: 'todo'
};
return [...taskList, newTask];
}
const initialTasks: Task[] = [firstTask, secondTask];
const updatedTasks: Task[] = addTask(initialTasks, "Review code changes");
// Create the changeTaskStatus function
function changeTaskStatus(taskList: Task[], taskId: number, newStatus: 'todo' | 'in-progress' | 'done'): Task[] {
return taskList.map(task =>
task.id === taskId ? { ...task, status: newStatus } : task
);
}
// Create testTasks array
const testTasks: Task[] = [firstTask, secondTask, thirdTask];
// Use changeTaskStatus function
const progressTasks = changeTaskStatus(testTasks, 1, 'in-progress');
const completedTasks = changeTaskStatus(progressTasks, 2, 'done');
// Print the required outputs
console.log(getTaskInfo(testTasks[0]));
console.log(getTaskInfo(progressTasks[0]));
console.log(getTaskInfo(completedTasks[1]));
console.log(testTasks[0].status);
console.log(completedTasks[1].status);Все уроки раздела Введение в TypeScript
1Начало работы с TS
Что такое TypeScript?Зачем использовать TypeScript?Ваш первый код на TypeScriptПроцесс компиляции и ошибкиИтоги: Введение в TS4Работа с функциями
Типизация параметров и возвращаемых значенийТипизация стрелочных функцийТип возвращаемого значения 'void'Необязательные параметры с '?'Значения параметров по умолчаниюТипизация Rest-параметровОпределение типов функцийИтоги: Создание типизированных функций7Проект: Простой список задач
Проект: Определение структуры TaskФункция для добавления задачи2Основные типы
Базовые типы: str, num, booleanТип 'any': лазейкаТип 'unknown'Работа с 'null' и 'undef'Вывод типов в действииЯвные аннотации типовИтоги: Практика по основным типам5Типы: псевдонимы, объединения и пересечения
Псевдонимы типов для примитивовТипы объединения ('|')Работа с типами объединенияЛитеральные типыТипы пересечения ('&')Комбинирование псевдонимов типовИтоги: продвинутые комбинации типов3Структуры данных: массивы и кортежи
Типизированные массивыМодификатор 'readonly' для массивовЧто такое кортеж?Объявление кортежей и доступ к нимДеструктуризация кортежейКортежи readonlyМногомерные типизированные массивыОператор spread с массивамиИтоги: массивы и кортежиПотренируйтесь самостоятельно: Песочница TypeScript