하나로 합치기

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 50번째.

챌린지

쉬움

이전 챌린지에서 제공된 다음 내용들이 주어집니다:

id (number), title (string), status (리터럴 타입)를 가진 Task 인터페이스
세 개의 태스크 변수: firstTask, secondTask, thirdTask
getTaskInfo 함수
addTask 함수
changeTaskStatus 함수
listTasksByStatus 함수
printTaskSummary 함수
printAllTaskSummaries 함수
모든 태스크 배열: initialTasks, updatedTasks, testTasks, progressTasks, completedTasks, mixedTasks, todoTasks, inProgressTasks, doneTasks, sampleTasks

지금까지 구축한 모든 기능을 보여주는 포괄적인 태스크 관리 워크플로우를 만드세요:

다음 초기 태스크들을 포함하는 Task[] 타입의 projectTasks 변수를 생성하세요:

id가 201, title이 "Setup development environment", status가 'done'인 태스크
id가 202, title이 "Create project structure", status가 'todo'인 태스크

다음 작업을 순서대로 수행하세요:

addTask를 사용하여 projectTasks에 title이 "Write documentation"인 새 태스크를 추가하고, 그 결과를 expandedTasks에 저장합니다.
changeTaskStatus를 사용하여 expandedTasks에서 ID가 202인 태스크의 상태를 'in-progress'로 변경하고, 그 결과를 updatedProjectTasks에 저장합니다.
changeTaskStatus를 사용하여 updatedProjectTasks에서 새로 추가된 태스크(ID 3)의 상태를 'done'으로 변경하고, 그 결과를 finalTasks에 저장합니다.
listTasksByStatus를 사용하여 finalTasks에서 'done' 상태인 태스크를 필터링하고, 그 결과를 completedProjectTasks에 저장합니다.

다음 출력값들을 각각 별도의 줄에 출력하세요:

projectTasks의 길이를 출력하세요.
finalTasks의 길이를 출력하세요.
completedProjectTasks의 길이를 출력하세요.
completedProjectTasks의 첫 번째 태스크를 인자로 하여 printTaskSummary를 호출하세요.
completedProjectTasks의 마지막 태스크를 인자로 하여 printTaskSummary를 호출하세요.
finalTasks를 인자로 하여 printAllTaskSummaries를 호출하세요.

직접 해보기

// Task interface and existing code 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];
}

function changeTaskStatus(taskList: Task[], taskId: number, newStatus: 'todo' | 'in-progress' | 'done'): Task[] {
  return taskList.map(task => 
    task.id === taskId ? { ...task, status: newStatus } : task
  );
}

function listTasksByStatus(tasks: Task[], status: 'todo' | 'in-progress' | 'done'): Task[] {
    return tasks.filter(task => task.status === status);
}

const initialTasks: Task[] = [firstTask, secondTask];
const updatedTasks: Task[] = addTask(initialTasks, "Review code changes");
const testTasks: Task[] = [firstTask, secondTask, thirdTask];
const progressTasks = changeTaskStatus(testTasks, 1, 'in-progress');
const completedTasks = changeTaskStatus(progressTasks, 2, 'done');
const mixedTasks: Task[] = [firstTask, secondTask, thirdTask];

const todoTasks = listTasksByStatus(mixedTasks, 'todo');
const inProgressTasks = listTasksByStatus(mixedTasks, 'in-progress');
const doneTasks = listTasksByStatus(mixedTasks, 'done');

function printTaskSummary(task: Task): void {
    console.log(`ID: ${task.id}, Title: ${task.title}, Status: ${task.status}`);
}

function printAllTaskSummaries(taskList: Task[]): void {
    for (let task of taskList) {
        printTaskSummary(task);
    }
}

const sampleTasks: Task[] = [
    { id: 101, title: "Design user interface", status: 'todo' },
    { id: 102, title: "Implement authentication", status: 'in-progress' },
    { id: 103, title: "Deploy to production", status: 'done' }
];

printTaskSummary(firstTask);
printTaskSummary(sampleTasks[1]);
printAllTaskSummaries(sampleTasks);
printTaskSummary(doneTasks[doneTasks.length - 1]);