Menu
CoddyTech
flag Ar iconالعربيةdown icon

دالة: عرض المهام حسب الحالة

جزء من قسم مقدمة إلى TypeScript في رحلة JavaScript على Coddy. الدرس 48 من 73.

challenge icon

التحدي

سهل

يتم تزويدك بما يلي من التحدي السابق:

  • واجهة 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

تدرّب بنفسك: Playground لـ TypeScript