함수: 할 일 요약 출력하기

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

챌린지

쉬움

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

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

하나의 매개변수를 받는 printTaskSummary라는 이름의 함수를 생성하세요:

Task 타입의 task (단일 Task 객체)

이 함수는 다음을 수행해야 합니다:

콘솔에 "ID: [id], Title: [title], Status: [status]"와 같은 정확한 형식으로 포맷된 요약을 출력합니다.
반환 타입은 void여야 합니다.

하나의 매개변수를 받는 printAllTaskSummaries라는 이름의 함수를 생성하세요:

Task[] 타입의 taskList (Task 객체 배열)

이 함수는 다음을 수행해야 합니다:

루프를 사용하여 배열의 각 태스크에 대해 printTaskSummary를 호출합니다.
반환 타입은 void여야 합니다.

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

id가 101, title이 "Design user interface", status가 'todo'인 태스크
id가 102, title이 "Implement authentication", status가 'in-progress'인 태스크
id가 103, title이 "Deploy to production", status가 'done'인 태스크

다음 출력값들을 출력하세요:

firstTask를 사용하여 printTaskSummary 호출
sampleTasks의 두 번째 태스크를 사용하여 printTaskSummary 호출
sampleTasks를 사용하여 printAllTaskSummaries 호출
doneTasks의 마지막 태스크를 사용하여 printTaskSummary 호출

직접 해보기

// Task interface and previous code from earlier 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
  );
}

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

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

// Create mixedTasks array
const mixedTasks: Task[] = [firstTask, secondTask, thirdTask];

// Filter tasks by status
const todoTasks = listTasksByStatus(mixedTasks, 'todo');
const inProgressTasks = listTasksByStatus(mixedTasks, 'in-progress');
const doneTasks = listTasksByStatus(mixedTasks, 'done');

// Print the required outputs
console.log(mixedTasks.length);
console.log(todoTasks.length);
console.log(inProgressTasks.length);
console.log(doneTasks.length);
console.log(getTaskInfo(todoTasks[0]));
console.log(getTaskInfo(inProgressTasks[0]));
console.log(getTaskInfo(doneTasks[0]));