دالة: عرض المهام حسب الحالة
جزء من قسم مقدمة إلى TypeScript في رحلة JavaScript على Coddy. الدرس 48 من 73.
التحدي
سهليتم تزويدك بما يلي من التحدي السابق:
- واجهة
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
1البداية مع TS
ما هي TypeScript؟لماذا نستخدم TypeScript؟أول كود TypeScript لكعملية الـ Compilation والأخطاءملخص: مقدمة في TS4التعامل مع الدوال
تحديد أنواع المعاملات وقيم الإرجاعتحديد أنواع Arrow Functionsنوع الإرجاع 'void'المعاملات الاختيارية باستخدام '?'القيم الافتراضية للمعاملاتتحديد أنواع Rest Parametersتعريف أنواع الدوالملخص: بناء دوال محددة الأنواع7مشروع: قائمة مهام بسيطة
مشروع: تعريف الـ Struct للمهمةدالة لإضافة مهمة2الأنواع الأساسية
الأنواع الأساسية: str, num, booleanالنوع 'any': مخرج الهروبالنوع 'unknown'التعامل مع 'null' و 'undef'استنتاج الأنواع في التطبيق العمليتوضيحات الأنواع الصريحةمراجعة: تدريب على الأنواع الأساسية5الأنواع: الأسماء المستعارة، الاتحادات والتقاطعات
الأسماء المستعارة للأنواع الأساسية (Primitives)أنواع الاتحاد ('|')التعامل مع أنواع الاتحادالأنواع الحرفية (Literal Types)أنواع التقاطع ('&')دمج الأسماء المستعارة للأنواعملخص: تركيبات الأنواع المتقدمة3هياكل البيانات: المصفوفات و Tuple
المصفوفات محددة النوع (Typed Arrays)معدل 'readonly' للمصفوفاتما هو الـ Tuple؟تعريف والوصول إلى الـ Tuplesتفكيك الـ Tuples (Destructuring)الـ Tuples للقراءة فقط (Readonly)المصفوفات محددة النوع متعددة الأبعاداستخدام Spread Operator مع المصفوفاتملخص: المصفوفات و Tuples6تحديد أنواع الكائنات والواجهات
توصيف أنواع الكائنات المضمنة (Inline)الأسماء المستعارة للأنواع (Type Aliases) للكائناتمقدمة عن الواجهات (Interfaces)الواجهات (Interfaces) مقابل الأسماء المستعارة للأنواع (Type Aliases)الخصائص الاختيارية وخصائص القراءة فقط (Readonly)توسيع الواجهات والأنواعإضافة الدوال (Methods) إلى الواجهاتملخص: تحديد هياكل الكائناتتدرّب بنفسك: Playground لـ TypeScript