البرمجة غير المتزامنة في TypeScript: دليل شامل

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة
```html

مقدمة في البرمجة غير المتزامنة في TypeScript



تطوير الويب الحديث لا يمكن تصوره بدون البرمجة غير المتزامنة. سواء كانت طلبات API، أو العمل مع نظام الملفات، أو المؤقتات - كل هذه العمليات تتطلب تنفيذ كود غير مانع. TypeScript، كإضافة فوق JavaScript، يوفر أدوات قوية للعمل مع عدم التزامن، مضيفًا كتابة صارمة (strict typing) وتحسين قابلية قراءة الكود.



في هذا الدليل، سنقوم بتحليل جميع جوانب البرمجة غير المتزامنة في TypeScript بالتفصيل: من أساسيات Promise إلى الأنماط المتقدمة مع async/await والتنفيذ المتوازي للمهام.



1. أساسيات Promise في TypeScript



ما هو Promise؟



Promise (الوعد) هو كائن يمثل نتيجة عملية غير متزامنة. يمكن أن يكون في إحدى الحالات الثلاث:



  • Pending (قيد الانتظار) — الحالة الأولية، العملية لم تكتمل بعد.
  • Fulfilled (مكتمل بنجاح) — اكتملت العملية بنجاح.
  • Rejected (مرفوض) — انتهت العملية بخطأ.


إنشاء Promise مع كتابة الأنواع (Typing)



يسمح TypeScript بكتابة أنواع القيم المرجعة من Promise بشكل صارم. لنلق نظرة على مثال:



// دالة ترجع Promise مع نوع البياناتfunction fetchUserData(userId: number): Promise<User> {    return new Promise<User>((resolve, reject) => {        setTimeout(() => {            const user: User = {                id: userId,                name: 'إيفان إيفانوف',                email: 'ivan@example.com'            };                        if (userId > 0) {                resolve(user);            } else {                reject(new Error('معرف المستخدم غير صحيح'));            }        }, 1000);    });}

// واجهة لكتابة أنواع البياناتinterface User { id: number; name: string; email: string;}

// استخدام PromisefetchUserData(1) .then((user: User) => { console.log(`المستخدم: ${user.name}`); }) .catch((error: Error) => { console.error(`خطأ: ${error.message}`); });


سلاسل Promise (Chaining)



يمكن ربط Promise في سلاسل لتنفيذ العمليات غير المتزامنة بشكل تسلسلي:



function getUserPosts(userId: number): Promise<string[]> {    return new Promise((resolve) => {        setTimeout(() => resolve(['منشور 1', 'منشور 2', 'منشور 3']), 500);    });}

function getPostComments(postTitle: string): Promise<string[]> { return new Promise((resolve) => { setTimeout(() => resolve(['تعليق 1', 'تعليق 2']), 300); });}

// سلسلة PromisefetchUserData(1) .then((user) => { console.log(`تم العثور على المستخدم: ${user.name}`); return getUserPosts(user.id); }) .then((posts) => { console.log(`عدد المنشورات التي تم العثور عليها: ${posts.length}`); return getPostComments(posts[0]); }) .then((comments) => { console.log(`عدد التعليقات على المنشور الأول: ${comments.length}`); }) .catch((error) => { console.error('حدث خطأ:', error); });


2. Async/Await — النهج الحديث



صيغة async/await



الكلمات المفتاحية async و await تجعل الكود غير المتزامن يبدو وكأنه متزامن، مما يحسن بشكل كبير من قابلية قراءته. الدالة المميزة بـ async ترجع دائمًا Promise.



// دالة غير متزامنة مع كتابة نوع القيمة المرجعةasync function loadUserProfile(userId: number): Promise<UserProfile> {    try {        const user = await fetchUserData(userId);        const posts = await getUserPosts(userId);                return {            user,            posts,            lastLogin: new Date()```                

المدونات

توصيات الكتب