पोर्टफोलियो को बूस्ट करें: 5 TypeScript प्रोजेक्ट्स जो नियोक्ता को प्रभावित करेंगे

TypeScript आपके पोर्टफोलियो में सबसे बड़ा तुरुप का पत्ता क्यों है?

JavaScript की दुनिया एक जंगली पश्चिम की तरह है। डायनामिक टाइपिंग आज़ादी देती है, लेकिन अक्सर कोड को रूलेट में बदल देती है। TypeScript एक शेरिफ की तरह आता है जो व्यवस्था स्थापित करता है। यदि आप सिर्फ कोड लिखना नहीं चाहते, बल्कि विश्वसनीय, स्केलेबल सिस्टम बनाना चाहते हैं - तो आपके पोर्टफोलियो में TypeScript प्रोजेक्ट्स आपके बारे में सब कुछ कह देंगे।

कल्पना करें: आप एक साक्षात्कार में जाते हैं। सभी लोगों के पास React पर मानक TODO-लिस्ट हैं। और आपके पास - fully-typed Telegram-बॉट ऑथराइजेशन के साथ, real-time चैट या अपना छोटा कंपाइलर। माना, यह अधिक प्रभावशाली लगता है। इस लेख में हम TypeScript पर पोर्टफोलियो के लिए 5 विचारों पर चर्चा करेंगे, जो न केवल आपके कौशल को बढ़ाएंगे बल्कि भर्तीकर्ताओं को आपके GitHub पर अटका देंगे।

चयन मानदंड: क्या एक प्रोजेक्ट को 'टॉप' बनाता है?

कोड में कूदने से पहले, आइए सहमत हों। एक अच्छे pet-प्रोजेक्ट TypeScript में ये होना चाहिए:

\n
• एक वास्तविक समस्या का समाधान (या कम से कम इसका अनुकरण)।
\n
• TS की उन्नत सुविधाओं का उपयोग: जेनेरिक्स, डेकोरेटर, utility types।
• टेस्ट हों - कोड कवरेज आपकी जिम्मेदारी दर्शाता है।
• दस्तावेजीकरण हो - इंस्टॉलेशन और उपयोग के उदाहरणों के साथ README।

तैयार हैं? चलिए शुरू करते हैं!

1. पूर्ण टाइपिंग के साथ वित्त प्रबंधन के लिए Telegram-बॉट

बॉट्स क्लासिक हैं। लेकिन TypeScript में सामान्य आर्किटेक्चर के साथ बॉट बनाना पहले से ही एक चुनौती है। हम सिर्फ "हैलो" पर हैंडलर नहीं लगाएंगे, बल्कि DI-कंटेनर और सख्त मॉडल के साथ एक माइक्रोसर्विस बनाएंगे।

अंदर क्या है?

\n
• डेटाबेस (SQLite या PostgreSQL) TypeORM के साथ।
• कमांड: /add_expense, /stats, /budget।
• enum के माध्यम से खर्च की श्रेणियां।

कोड उदाहरण: टाइप की गई मॉडल और कमांड

// 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 के माध्यम से DB के साथ काम करने, एसिंक्रोनसिटी की समझ और डेटा की सख्त टाइपिंग दिखाते हैं। साथ ही - उपयोग का एक वास्तविक परिदृश्य।

2. WebSocket + React पर Real-time कार्य बोर्ड (Kanban)

TODO-लिस्ट बनाना उबाऊ है। मल्टी-यूज़र Kanban को drag-and-drop और WebSocket के साथ TypeScript पर बनाना पहले से ही दिलचस्प है। यहां आप खुद को fullstack-डेवलपर के रूप में प्रकट करते हैं।

आर्किटेक्चर

\n
• Backend: Express + Socket.io + TypeScript।
• Frontend: React + react-beautiful-dnd + Redux Toolkit।
• सभी इवेंट्स की टाइपिंग (socket events as union types)।

उदाहरण: टाइप किया गया WebSocket handler

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