Funktion: Aufgaben nach Status auflisten

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 48 von 73.

Aufgabe

Einfach

Dir wird Folgendes aus der vorherigen Herausforderung bereitgestellt:

Das Task-Interface mit id (number), title (string) und status (Literaltyp)
Drei Aufgabenvariablen: firstTask, secondTask und thirdTask
Die Funktion getTaskInfo
Die Funktion addTask
Die Funktion changeTaskStatus
Die Arrays initialTasks, updatedTasks, testTasks, progressTasks und completedTasks

Erstelle eine Funktion namens listTasksByStatus, die zwei Parameter entgegennimmt:

taskList vom Typ Task[] (ein Array von Task-Objekten)
status vom Typ 'todo' | 'in-progress' | 'done' (der Status, nach dem gefiltert werden soll)

Die Funktion soll:

Die Array-Methode filter verwenden, um ein neues Array zurückzugeben, das nur Aufgaben enthält, die dem angegebenen Status entsprechen
Das gefilterte Array von Aufgaben zurückgeben

Erstelle eine Variable namens mixedTasks vom Typ Task[], die alle drei ursprünglichen Aufgaben enthält: firstTask, secondTask und thirdTask.

Verwende deine Funktion listTasksByStatus, um die folgenden gefilterten Arrays zu erstellen:

Filtere mixedTasks nach dem Status 'todo' und speichere das Ergebnis in todoTasks
Filtere mixedTasks nach dem Status 'in-progress' und speichere das Ergebnis in inProgressTasks
Filtere mixedTasks nach dem Status 'done' und speichere das Ergebnis in doneTasks

Gib die folgenden Ausgaben in separaten Zeilen aus:

Gib die Länge von mixedTasks aus
Gib die Länge von todoTasks aus
Gib die Länge von inProgressTasks aus
Gib die Länge von doneTasks aus
Rufe getTaskInfo mit der ersten Aufgabe aus todoTasks auf und gib das Ergebnis aus
Rufe getTaskInfo mit der ersten Aufgabe aus inProgressTasks auf und gib das Ergebnis aus
Rufe getTaskInfo mit der ersten Aufgabe aus doneTasks auf und gib das Ergebnis aus

Probier es selbst

// 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);