تجميع كل الأجزاء معاً
جزء من قسم Introduction To TypeScript في رحلة JavaScript على Coddy. الدرس 50 من 73.
التحدي
سهليتم تزويدك بما يلي من التحدي السابق:
- واجهة
Taskمعid(رقم)، وtitle(سلسلة نصية)، وstatus(نوع حرفي) - ثلاثة متغيرات للمهام:
firstTask، وsecondTask، وthirdTask - دالة
getTaskInfo - دالة
addTask - دالة
changeTaskStatus - دالة
listTasksByStatus - دالة
printTaskSummary - دالة
printAllTaskSummaries - جميع مصفوفات المهام:
initialTasks، وupdatedTasks، وtestTasks، وprogressTasks، وcompletedTasks، وmixedTasks، وtodoTasks، وinProgressTasks، وdoneTasks، وsampleTasks
قم بإنشاء سير عمل شامل لإدارة المهام يوضح جميع الوظائف التي قمت ببنائها:
قم بإنشاء متغير باسم projectTasks من نوع Task[] يحتوي على هذه المهام الأولية:
- مهمة بمعرف
201، وعنوان"Setup development environment"، وحالة'done' - مهمة بمعرف
202، وعنوان"Create project structure"، وحالة'todo'
قم بإجراء العمليات التالية بالتسلسل:
- استخدم
addTaskلإضافة مهمة جديدة بعنوان"Write documentation"إلىprojectTasksوقم بتخزين النتيجة فيexpandedTasks - استخدم
changeTaskStatusلتغيير حالة المهمة ذات المعرف202إلى'in-progress'فيexpandedTasksوقم بتخزين النتيجة فيupdatedProjectTasks - استخدم
changeTaskStatusلتغيير حالة المهمة المضافة حديثاً (المعرف3) إلى'done'فيupdatedProjectTasksوقم بتخزين النتيجة فيfinalTasks - استخدم
listTasksByStatusلتصفيةfinalTasksللحالة'done'وقم بتخزين النتيجة فيcompletedProjectTasks
قم بطباعة المخرجات التالية في أسطر منفصلة:
- اطبع طول
projectTasks - اطبع طول
finalTasks - اطبع طول
completedProjectTasks - استدعِ
printTaskSummaryمع المهمة الأولى منcompletedProjectTasks - استدعِ
printTaskSummaryمع المهمة الأخيرة منcompletedProjectTasks - استدعِ
printAllTaskSummariesمعfinalTasks
جرّب بنفسك
// 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]);جميع دروس Introduction To 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) إلى الواجهاتملخص: تحديد هياكل الكائناتتدرّب بنفسك: مترجم JavaScript عبر الإنترنت