TypeScript على جميع الجبهات: كيفية كتابة كود للويب، والموبايل، وسطح المكتب

TypeScript — الجندي العالمي في التطوير الحديث

هل حلمت يومًا بكتابة قاعدة كود واحدة وتشغيلها على موقع إلكتروني، تطبيق موبايل، وسطح المكتب؟ قبل عشر سنوات، كان هذا سيبدو كخيال علمي. اليوم، يمنحنا TypeScript هذه الإمكانية دون سحر أو تضحيات.

TypeScript ليس مجرد "JavaScript مع أنواع". إنها أداة قوية تحول فوضى الكتابة الديناميكية إلى بنية منظمة. والأهم من ذلك، أنها تناسب أي منصة بشكل ممتاز. الويب، والأجهزة المحمولة (iOS، Android)، وأنظمة سطح المكتب (Windows، macOS، Linux) — كل منها لديه إطار عمل خاص به لـ TypeScript.

في هذه المقالة، سنستعرض استراتيجيات حقيقية وأمثلة كود ستساعدك على أن تصبح مطورًا عبر المنصات باستخدام TypeScript. ستتعلم كيفية تجنب تكرار المنطق، وأي المكتبات تختار، وكيف لا تفقد الأداء.

لماذا أصبح TypeScript معيارًا للتطوير عبر المنصات

في السابق، كان عليك تعلم لغة جديدة لكل منصة: Swift لنظام iOS، Java/Kotlin لنظام Android، C# لنظام Windows، Python للخلفية. TypeScript يكسر هذه الصورة النمطية. إنه يعمل في أي مكان يوجد فيه بيئة تشغيل JavaScript (متصفح، Node.js، Deno) أو غلاف أصلي (React Native، Electron).

المزايا الرئيسية لـ TypeScript في التطوير عبر المنصات:

\n
• قاعدة كود موحدة — اكتب منطق الأعمال مرة واحدة، واستخدمه على جميع المنصات.
\n
• الكتابة الصارمة — اكتشف الأخطاء في مرحلة التجميع، وليس في وقت التشغيل.
\n
• نظام بيئي غني — آلاف المكتبات بأنواع جاهزة (DefinitelyTyped).
\n
• بناء جملة حديث — async/await، الأدوية (Generics)، الديكورات (Decorators)، الأنواع المساعدة (Utility Types).
\n

بالمناسبة، إذا كنت تعمل بالفعل مع Python وترغب في تجربة TypeScript، فستجد مفاجأة سارة: العديد من المفاهيم (الكتابة الثابتة، الواجهات، الأدوية) متشابهة جدًا. على pythonlib.ru، نحب أن نظهر كيف تحل اللغات المختلفة نفس المشكلات. TypeScript بهذا المعنى هو جسر مثالي بين الويب والتطبيقات الأصلية.

هندسة مشروع عبر المنصات باستخدام TypeScript

لكي يعمل الكود في كل مكان، يجب تقسيم التطبيق إلى ثلاث طبقات:

\n
• النواة (Core) — منطق أعمال خالص، لا يعتمد على المنصة.
\n
• المحولات (Adapters) — طبقات رقيقة لواجهة المستخدم، نظام الملفات، الشبكة.
\n
• الأغلفة الخاصة بالمنصة — React للويب، React Native للموبايل، Electron لسطح المكتب.
\n

لنأخذ مثالاً: تطبيق ملاحظات مع علامات (Tags). ستحتوي النواة فقط على الأنواع والوظائف الخاصة بمعالجة البيانات.

// core/types.ts\nexport interface Note {\n  id: string;\n  title: string;\n  content: string;\n  tags: string[];\n  createdAt: Date;\n}\n\n// core/noteService.ts\nexport function filterNotesByTag(notes: Note[], tag: string): Note[] {\n  return notes.filter(note => note.tags.includes(tag));\n}\n\nexport function createNote(title: string, content: string, tags: string[]): Note {\n  return {\n    id: crypto.randomUUID(),\n    title,\n    content,\n    tags,\n    createdAt: new Date(),\n  };\n}\n

يمكن استخدام هذا الكود في أي بيئة. لا توجد تبعيات على DOM أو React أو Node.js. منطق TypeScript خالص.

واجهة مستخدم عبر المنصات: React + React Native + Electron

المكدس الأكثر شيوعًا للتطوير عبر المنصات باستخدام TypeScript هو React (الويب)، React Native (الموبايل)، و Electron (سطح المكتب). جميعها تستخدم نفس بناء جملة المكونات، ولكن مع محركات عرض مختلفة.

الخطوة 1. إنشاء مكونات مشتركة

يمكن استخراج منطق العرض في مكونات مجردة تستخدم بدائيات المنصة.

// shared/NoteCard.tsx\nimport { View, Text,