関数：ステータス別にタスクを一覧表示する

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 48/73。

チャレンジ

簡単

前のチャレンジから、以下の内容が提供されています：

id (number)、title (string)、および status (リテラル型) を持つ Task インターフェース
3つのタスク変数：firstTask、secondTask、および thirdTask
getTaskInfo 関数
addTask 関数
changeTaskStatus 関数
initialTasks、updatedTasks、testTasks、progressTasks、および completedTasks 配列

2つのパラメータを受け取る listTasksByStatus という名前の関数を作成してください：

Task[] 型の taskList (Taskオブジェクトの配列)
'todo' | 'in-progress' | 'done' 型の status (フィルタリングするステータス)

この関数は以下のことを行う必要があります：

配列の filter メソッドを使用して、指定されたステータスに一致するタスクのみを含む新しい配列を返します
フィルタリングされたタスクの配列を返します

3つの元のタスク firstTask、secondTask、および thirdTask すべてを含む、Task[] 型の mixedTasks という名前の変数を作成してください。

listTasksByStatus 関数を使用して、以下のフィルタリングされた配列を作成してください：

mixedTasks を 'todo' ステータスでフィルタリングし、その結果を todoTasks に保存します
mixedTasks を 'in-progress' ステータスでフィルタリングし、その結果を inProgressTasks に保存します
mixedTasks を 'done' ステータスでフィルタリングし、その結果を doneTasks に保存します

以下の出力を別々の行に表示してください：

mixedTasks の長さを表示します
todoTasks の長さを表示します
inProgressTasks の長さを表示します
doneTasks の長さを表示します
todoTasks の最初のタスクを引数に getTaskInfo を呼び出し、その結果を表示します
inProgressTasks の最初のタスクを引数に getTaskInfo を呼び出し、その結果を表示します
doneTasks の最初のタスクを引数に getTaskInfo を呼び出し、その結果を表示します

自分で試してみよう

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