عزز محفظتك: 5 مشاريع بلغة TypeScript ستبهر صاحب العمل

لماذا TypeScript هو ورقتك الرابحة في المحفظة؟

عالم JavaScript هو الغرب المتوحش. الكتابة الديناميكية تمنح الحرية، لكنها غالبًا ما تحول الكود إلى لعبة حظ. يأتي TypeScript كالشريف الذي يفرض النظام. إذا كنت لا تريد فقط كتابة الكود، بل بناء أنظمة موثوقة وقابلة للتوسع - فإن مشاريع TypeScript في محفظتك ستتحدث عنك نيابةً عنك.

تخيل: تذهب إلى مقابلة عمل. جميع المتقدمين لديهم قوائم TODO قياسية على React. أما أنت فلديك بوت Telegram مكتوب بالكامل مع أنواع مع توثيق، أو غرفة دردشة فورية، أو مترجم صغير خاص بك. ألا يبدو ذلك أكثر أهمية؟ في هذه المقالة، سنستعرض 5 أفكار لـ محفظة TypeScript لن تطور مهاراتك فحسب، بل ستجعل مسؤولي التوظيف يتوقفون عند GitHub الخاص بك.

معايير الاختيار: ما الذي يجعل المشروع "ممتازًا"؟

قبل الغوص في الكود، دعنا نتفق. يجب أن يكون المشروع الشخصي بلغة TypeScript الجيد:

\n
• يحل مشكلة حقيقية (أو على الأقل يحاكي ذلك).
\n
• يستخدم ميزات TS المتقدمة: الأدوية (Generics)، الديكورات (Decorators)، الأنواع المساعدة (Utility Types).
\n
• لديه اختبارات - تغطية الكود تظهر مسؤوليتك.
\n
• موثق جيدًا - README مع أمثلة التثبيت والاستخدام.
\n

هل أنت مستعد؟ هيا بنا!

1. بوت Telegram لإدارة الشؤون المالية بكتابة كاملة

البوتات كلاسيكية. لكن إنشاء بوت بـ TypeScript بمعمارية جيدة هو تحدٍ بحد ذاته. لن نقوم فقط بتعليق معالج على "مرحبًا"، بل سنبني خدمة مصغرة (Microservice) مع حاويات حقن التبعية (DI containers) ونماذج صارمة.

ماذا في الداخل؟

\n
• قاعدة بيانات (SQLite أو PostgreSQL) مع TypeORM.
\n
• الأوامر: /add_expense، /stats، /budget.
\n
• فئات المصروفات عبر enum.
\n

مثال كود: نموذج وأمر مكتوبان بأنواع

// models/Expense.ts\nimport { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn } from 'typeorm';\nimport { Category } from './enums';\n\n@Entity()\nexport class Expense {\n    @PrimaryGeneratedColumn()\n    id!: number;\n\n    @Column()\n    userId!: number;\n\n    @Column('decimal', { precision: 10, scale: 2 })\n    amount!: number;\n\n    @Column({\n        type: 'enum',\n        enum: Category,\n        default: Category.OTHER\n    })\n    category!: Category;\n\n    @CreateDateColumn()\n    createdAt!: Date;\n}\n\n// commands/addExpense.ts\nimport { Context } from 'telegraf';\nimport { getRepository } from 'typeorm';\nimport { Expense } from '../models/Expense';\nimport { Category } from '../models/enums';\n\nexport async function addExpense(ctx: Context, amount: number, category: Category) {\n    const repo = getRepository(Expense);\n    const expense = repo.create({\n        userId: ctx.from!.id,\n        amount,\n        category\n    });\n    await repo.save(expense);\n    await ctx.reply(`✅ تمت الإضافة: ${amount} روبل في الفئة ${category}`);\n}\n

لماذا هذا رائع؟ أنت تظهر القدرة على العمل مع قواعد البيانات عبر ORM، وفهم البرمجة غير المتزامنة (Asynchronous)، والكتابة الصارمة للبيانات. بالإضافة إلى ذلك - سيناريو استخدام حقيقي.

2. لوحة مهام فورية (Kanban) باستخدام WebSocket + React

إنشاء قائمة TODO ممل. إنشاء لوحة Kanban متعددة المستخدمين مع السحب والإفلات (drag-and-drop) و WebSocket بلغة TypeScript هو أمر مثير للاهتمام. هنا تظهر نفسك كمطور Fullstack.

المعمارية

\n
• الواجهة الخلفية (Backend): Express + Socket.io + TypeScript.
\n
• الواجهة الأمامية (Frontend): React + react-beautiful-dnd + Redux Toolkit.
\n
• كتابة جميع الأحداث بأنواع (أحداث Socket كـ union types).
\n

مثال: معالج WebSocket مكتوب بأنواع

// types/socket-events.ts\nexport interface ServerToClientEvents {\n    taskMoved: (task: Task, fromColumn: ColumnId, toColumn: ColumnId) => void;\n    newTask: (task: Task) => void;\n}\n