مطابقة الأنماط والسلامة من النوع في JavaScript: دليل للتحقق في وقت الترجمة

تُعد مطابقة الأنماط واحدة من أقوى الميزات وأكثرها تعبيرًا في البرمجة الحديثة، والتي يتم الاحتفاء بها منذ فترة طويلة في اللغات الوظيفية مثل Haskell و Rust و F#. إنها تسمح للمطورين بتفكيك البيانات وتنفيذ التعليمات البرمجية بناءً على بنيتها بطريقة موجزة وقابلة للقراءة بشكل لا يصدق. مع استمرار تطور JavaScript، يتطلع المطورون بشكل متزايد إلى تبني هذه النماذج القوية. ومع ذلك، لا يزال هناك تحد كبير: كيف نحقق السلامة القوية من النوع وضمانات وقت الترجمة لهذه اللغات في عالم JavaScript الديناميكي؟

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

سنستكشف كيف يمكننا بناء أنظمة قوية وذاتية التوثيق ومقاومة للأخطاء من خلال الجمع بين ميزات TypeScript القوية وأناقة مطابقة الأنماط. استعد للتخلص من فئة كاملة من أخطاء وقت التشغيل وكتابة تعليمات برمجية أكثر أمانًا وأسهل في الصيانة.

ما هي مطابقة الأنماط بالضبط؟

في جوهرها، مطابقة الأنماط هي آلية متطورة للتحكم في التدفق. إنها مثل عبارة `switch` فائقة القدرة. بدلاً من مجرد التحقق من المساواة مقابل القيم البسيطة (مثل الأرقام أو السلاسل)، تتيح لك مطابقة الأنماط التحقق من قيمة مقابل "أنماط" معقدة، وإذا تم العثور على تطابق، فقم بربط المتغيرات بأجزاء من تلك القيمة.

دعونا نقارنها بالطرق التقليدية:

الطريقة القديمة: سلاسل `if-else` و `switch`

ضع في اعتبارك دالة تحسب مساحة شكل هندسي. باستخدام الطريقة التقليدية، قد تبدو التعليمات البرمجية الخاصة بك كما يلي:

            
// Shape is an object with a 'type' property
function calculateArea(shape) {
  if (shape.type === 'circle') {
    return Math.PI * shape.radius * shape.radius;
  } else if (shape.type === 'square') {
    return shape.sideLength * shape.sideLength;
  } else if (shape.type === 'rectangle') {
    return shape.width * shape.height;
  } else {
    throw new Error('Unsupported shape type');
  }
}

            

              
                Copy
              
            
          

هذا يعمل، لكنه مطول وعرضة للأخطاء. ماذا لو أضفت شكلاً جديدًا، مثل `triangle`، ولكن نسيت تحديث هذه الدالة؟ ستطرح التعليمات البرمجية خطأً عامًا في وقت التشغيل، والذي قد يكون بعيدًا عن المكان الذي تم فيه تقديم الخطأ الفعلي.

طريقة مطابقة الأنماط: تعريفية ومعبرة

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

            
// Pseudocode for a future JavaScript pattern matching feature
function calculateArea(shape) {
  match (shape) {
    when ({ type: 'circle', radius }): return Math.PI * radius * radius;
    when ({ type: 'square', sideLength }): return sideLength * sideLength;
    when ({ type: 'rectangle', width, height }): return width * height;
    default: throw new Error('Unsupported shape type');
  }
}

            

              
                Copy
              
            
          

المزايا الرئيسية واضحة على الفور:

• تفكيك البنية: يتم استخراج قيم مثل `radius` و `width` و `height` تلقائيًا من كائن `shape`.
• إمكانية القراءة: نية التعليمات البرمجية أكثر وضوحًا. يصف كل شرط `when` بنية بيانات محددة والمنطق المقابل لها.
• الشمولية: هذه هي الفائدة الأكثر أهمية لسلامة النوع. يمكن لنظام مطابقة الأنماط القوي حقًا أن يحذرك في وقت الترجمة إذا نسيت التعامل مع حالة ممكنة. هذا هو هدفنا الأساسي.

تحدي JavaScript: الديناميكية مقابل السلامة

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

• لا توجد ضمانات في وقت الترجمة: لن تعرف أنك فاتتك حالة ما حتى يتم تشغيل التعليمات البرمجية الخاصة بك وتصل إلى هذا المسار المحدد.
• إخفاقات صامتة: إذا نسيت حالة افتراضية، فقد تؤدي القيمة غير المطابقة ببساطة إلى `undefined`، مما يتسبب في أخطاء طفيفة في المراحل النهائية.
• كوابيس إعادة البناء: تتطلب إضافة متغير جديد إلى بنية بيانات (مثل نوع حدث جديد أو حالة استجابة API جديدة) بحثًا واستبدالًا عالميًا للعثور على جميع الأماكن التي يجب التعامل معها. قد يؤدي فقدان واحد إلى تعطيل التطبيق الخاص بك.

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

التقنية 1: الأساس مع الاتحادات المتميزة

أهم ميزة في TypeScript لتمكين مطابقة الأنماط الآمنة من النوع هي الاتحاد المتميز (المعروف أيضًا باسم الاتحاد الموسوم أو نوع البيانات الجبرية). إنها طريقة قوية لنمذجة نوع يمكن أن يكون واحدًا من عدة احتمالات متميزة.

ما هو الاتحاد المتميز؟

يتم بناء الاتحاد المتميز من ثلاثة مكونات:

1. مجموعة من الأنواع المتميزة (أعضاء الاتحاد).
2. خاصية شائعة بنوع حرفي، تُعرف باسم المميز أو العلامة. تسمح هذه الخاصية لـ TypeScript بتضييق النوع المحدد داخل الاتحاد.
3. نوع الاتحاد الذي يجمع بين جميع أنواع الأعضاء.

دعنا نعيد تصميم مثال الشكل الخاص بنا باستخدام هذا النمط:

            
// 1. Define the distinct member types
interface Circle {
  kind: 'circle'; // The discriminant
  radius: number;
}

interface Square {
  kind: 'square'; // The discriminant
  sideLength: number;
}

interface Rectangle {
  kind: 'rectangle'; // The discriminant
  width: number;
  height: number;
}

// 2. Create the union type
type Shape = Circle | Square | Rectangle;

            

              
                Copy
              
            
          

الآن، يجب أن يكون المتغير من النوع `Shape` واحدًا من هذه الواجهات الثلاث. تعمل الخاصية `kind` كمفتاح يفتح قدرات تضييق نوع TypeScript.

تنفيذ فحص الشمولية في وقت الترجمة

مع وجود اتحادنا المتميز في مكانه، يمكننا الآن كتابة دالة يضمنها المترجم للتعامل مع كل شكل ممكن. المكون السحري هو نوع `never` الخاص بـ TypeScript، والذي يمثل قيمة لا ينبغي أن تحدث أبدًا.

يمكننا كتابة دالة مساعدة بسيطة لفرض ذلك:

            
function assertUnreachable(x: never): never {
  throw new Error("Didn't expect to get here");
}

            

              
                Copy
              
            
          

الآن، دعنا نعيد كتابة دالة `calculateArea` الخاصة بنا باستخدام عبارة `switch` قياسية. شاهد ما يحدث في حالة `default`:

            
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      // TypeScript knows `shape` is a Circle here!
      return Math.PI * shape.radius ** 2;

    case 'square':
      // TypeScript knows `shape` is a Square here!
      return shape.sideLength ** 2;

    case 'rectangle':
      // TypeScript knows `shape` is a Rectangle here!
      return shape.width * shape.height;

    default:
      // If we've handled all cases, `shape` will be of type `never`
      return assertUnreachable(shape);
  }
}

            

              
                Copy
              
            
          

يتم تجميع هذا الرمز بشكل مثالي. داخل كل كتلة `case`، قامت TypeScript بتضييق نوع `shape` إلى `Circle` أو `Square` أو `Rectangle`، مما يسمح لنا بالوصول إلى خصائص مثل `radius` بأمان.

الآن لحظة السحر. دعنا نقدم شكلاً جديدًا لنظامنا:

            
interface Triangle {
  kind: 'triangle';
  base: number;
  height: number;
}

type Shape = Circle | Square | Rectangle | Triangle; // Add it to the union

            

              
                Copy
              
            
          

بمجرد إضافة `Triangle` إلى اتحاد `Shape`، ستنتج دالة `calculateArea` الخاصة بنا على الفور خطأ في وقت الترجمة:

            
// In the `default` block of `calculateArea`:

return assertUnreachable(shape);
//                      ~~~~~
// Argument of type 'Triangle' is not assignable to parameter of type 'never'.

            

              
                Copy
              
            
          

هذا الخطأ قيم بشكل لا يصدق. يخبرنا مترجم TypeScript، "لقد وعدت بالتعامل مع كل `Shape` ممكن، لكنك نسيت `Triangle`. لا يزال من الممكن أن يكون المتغير `shape` `Triangle` في الحالة الافتراضية، وهذا غير قابل للتخصيص لـ `never`."

لإصلاح الخطأ، نضيف ببساطة الحالة المفقودة. يصبح المترجم شبكة الأمان الخاصة بنا، مما يضمن أن المنطق الخاص بنا يظل متزامنًا مع نموذج البيانات الخاص بنا.

            
// ... inside the switch
    case 'triangle':
      return 0.5 * shape.base * shape.height;

    default:
      return assertUnreachable(shape);
// ... now the code compiles again!

            

              
                Copy
              
            
          

إيجابيات وسلبيات هذا النهج

• الإيجابيات:
  • لا توجد تبعيات: يستخدم فقط ميزات TypeScript الأساسية.
  • أقصى قدر من سلامة النوع: يوفر ضمانات قوية في وقت الترجمة.
  • أداء ممتاز: يتم تجميعه في عبارة JavaScript `switch` قياسية مُحسَّنة للغاية.
• السلبيات:
  • الإسهاب: يمكن أن تشعر القوالب النمطية `switch` و `case` و `break` / `return` و `default` بأنها مرهقة.
  • ليس تعبيرًا: لا يمكن إرجاع عبارة `switch` مباشرة أو تعيينها لمتغير، مما يؤدي إلى أنماط تعليمات برمجية أكثر إلزامية.

التقنية 2: واجهات برمجة تطبيقات مريحة مع المكتبات الحديثة

في حين أن الاتحاد المتميز مع عبارة `switch` هو الأساس، إلا أن القوالب النمطية الخاصة به يمكن أن تكون مملة. وقد أدى ذلك إلى ظهور مكتبات رائعة مفتوحة المصدر توفر واجهة برمجة تطبيقات أكثر وظيفية ومعبرة ومريحة لمطابقة الأنماط، مع الاستمرار في الاستفادة من مترجم TypeScript للسلامة.

تقديم `ts-pattern`

واحدة من أكثر المكتبات شيوعًا وقوة في هذا المجال هي `ts-pattern`. إنها تتيح لك استبدال عبارات `switch` بواجهة برمجة تطبيقات سلسلة بطلاقة تعمل كتعبير.

دعنا نعيد كتابة دالة `calculateArea` الخاصة بنا باستخدام `ts-pattern`:

            
import { match } from 'ts-pattern';

function calculateAreaWithTsPattern(shape: Shape): number {
  return match(shape)
    .with({ kind: 'circle' }, (s) => Math.PI * s.radius ** 2)
    .with({ kind: 'square' }, (s) => s.sideLength ** 2)
    .with({ kind: 'rectangle' }, (s) => s.width * s.height)
    .with({ kind: 'triangle' }, (s) => 0.5 * s.base * s.height)
    .exhaustive(); // This is the key to compile-time safety
}

            

              
                Copy
              
            
          

دعنا نحلل ما يحدث:

• `match(shape)`: يبدأ هذا تعبير مطابقة الأنماط، مع أخذ القيمة المراد مطابقتها.
• `.with({ kind: '...' }, handler)`: تحدد كل مكالمة `.with()` نمطًا. `ts-pattern` ذكي بما يكفي لاستنتاج نوع الوسيطة الثانية (دالة `handler`). بالنسبة للنمط `{ kind: 'circle' }`، فإنه يعرف أن الإدخال `s` للمعالج سيكون من النوع `Circle`.
• `.exhaustive()`: هذه الطريقة تعادل خدعة `assertUnreachable` الخاصة بنا. يخبر `ts-pattern` أنه يجب التعامل مع جميع الحالات الممكنة. إذا أزلنا السطر `.with({ kind: 'triangle' }, ...)`، فسيؤدي `ts-pattern` إلى حدوث خطأ في وقت الترجمة في استدعاء `.exhaustive()`، مما يخبرنا أن التطابق ليس شاملاً.

الميزات المتقدمة لـ `ts-pattern`

يتجاوز `ts-pattern` بكثير مطابقة الخصائص البسيطة:

• مطابقة المسند مع `.when()`: تطابق بناءً على شرط.

              
  match(input)
    .when(isString, (str) => `It's a string: ${str}`)
    .when(isNumber, (num) => `It's a number: ${num}`)
    .otherwise(() => 'It is something else');
  
              
  
                
                  Copy
                
              
            

• الأنماط المتداخلة بعمق: تطابق هياكل الكائنات المعقدة.

              
  match(user)
    .with({ address: { city: 'Paris' } }, () => 'User is in Paris')
    .otherwise(() => 'User is elsewhere');
  
              
  
                
                  Copy
                
              
            

• أحرف البدل والمحددات الخاصة: استخدم `P.select()` لالتقاط قيمة داخل نمط، أو `P.string` و `P.number` لمطابقة أي قيمة من نوع معين.

              
  import { match, P } from 'ts-pattern';
  
  match(event)
    .with({ type: 'USER_LOGIN', user: { name: P.select() } }, (name) => {
      console.log(`${name} logged in.`);
    })
    .otherwise(() => {});
  
              
  
                
                  Copy
                
              
            

باستخدام مكتبة مثل `ts-pattern`، تحصل على أفضل ما في العالمين: سلامة وقت الترجمة القوية لفحص `never` الخاص بـ TypeScript، جنبًا إلى جنب مع واجهة برمجة تطبيقات نظيفة وتعريفية ومعبرة للغاية.

المستقبل: اقتراح مطابقة الأنماط TC39

لغة JavaScript نفسها في طريقها للحصول على مطابقة أنماط أصلية. هناك اقتراح نشط في TC39 (اللجنة التي توحد JavaScript) لإضافة تعبير `match` إلى اللغة.

بناء الجملة المقترح

من المحتمل أن يبدو بناء الجملة شيئًا كهذا:

            
// This is proposed JavaScript syntax and might change
const getMessage = (response) => {
  return match (response) {
    when ({ status: 200, body: b }) { return `Success with body: ${b}`; }
    when ({ status: 404 }) { return 'Not Found'; }
    when ({ status: s if s >= 500 }) { return `Server Error: ${s}`; }
    default { return 'Unknown response'; }
  }
};

            

              
                Copy
              
            
          

ماذا عن سلامة النوع؟

هذا هو السؤال الحاسم لمناقشتنا. في حد ذاته، ستجري ميزة مطابقة الأنماط الأصلية في JavaScript فحوصاتها في وقت التشغيل. لن تعرف أنواع TypeScript الخاصة بك.

ومع ذلك، من المؤكد تقريبًا أن فريق TypeScript سيبني تحليلًا ثابتًا فوق بناء الجملة الجديد هذا. تمامًا كما تحلل TypeScript عبارات `if` وكتل `switch` لإجراء تضييق النوع، فإنها ستحلل تعبيرات `match`. هذا يعني أننا قد نحصل في النهاية على أفضل نتيجة ممكنة:

1. بناء جملة أصلي وعالي الأداء: لا حاجة إلى مكتبات أو حيل التحويل البرمجي.
2. سلامة كاملة في وقت الترجمة: ستتحقق TypeScript من تعبير `match` للشمولية مقابل اتحاد متميز، تمامًا كما تفعل اليوم بالنسبة لـ `switch`.

بينما ننتظر أن تشق هذه الميزة طريقها عبر مراحل الاقتراح وإلى المتصفحات وأوقات التشغيل، فإن التقنيات التي ناقشناها اليوم مع الاتحادات المتميزة والمكتبات هي الحل الجاهز للإنتاج وأحدث الحلول.

التطبيقات العملية وأفضل الممارسات

دعنا نرى كيف تنطبق هذه الأنماط على سيناريوهات تطوير شائعة في العالم الحقيقي.

إدارة الحالة (Redux ،Zustand ، إلخ.)

تعد إدارة الحالة بالإجراءات حالة استخدام مثالية للاتحادات المتميزة. بدلاً من استخدام ثوابت السلسلة لأنواع الإجراءات، حدد اتحادًا متميزًا لجميع الإجراءات الممكنة.

            
// Define actions
interface IncrementAction { type: 'counter/increment'; payload: number; }
interface DecrementAction { type: 'counter/decrement'; payload: number; }
interface ResetAction { type: 'counter/reset'; }

type CounterAction = IncrementAction | DecrementAction | ResetAction;

// A type-safe reducer
function counterReducer(state: number, action: CounterAction): number {
  return match(action)
    .with({ type: 'counter/increment' }, (act) => state + act.payload)
    .with({ type: 'counter/decrement' }, (act) => state - act.payload)
    .with({ type: 'counter/reset' }, () => 0)
    .exhaustive();
}

            

              
                Copy
              
            
          

الآن، إذا أضفت إجراءً جديدًا إلى اتحاد `CounterAction`، فستجبرك TypeScript على تحديث المخفض. لا مزيد من معالجات الإجراءات المنسية!

التعامل مع استجابات واجهة برمجة التطبيقات

يتضمن جلب البيانات من واجهة برمجة تطبيقات حالات متعددة: التحميل والنجاح والخطأ. إن نمذجة هذا باستخدام اتحاد متميز تجعل منطق واجهة المستخدم الخاص بك أكثر قوة.

            
// Model the async data state
type RemoteData =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: E };

// In your UI component (e.g., React)
function UserProfile({ userId }: { userId: string }) {
  const [userState, setUserState] = useState>({ status: 'idle' });

  // ... useEffect to fetch data and update state ...

  return match(userState)
    .with({ status: 'idle' }, () => 
Click a button to load the user.
)
    .with({ status: 'loading' }, () => )
    .with({ status: 'success' }, (state) => )
    .with({ status: 'error' }, (state) => )
    .exhaustive();
}

            

              
                Copy
              
            
          

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

ملخص أفضل الممارسات

• نموذج مع اتحادات متميزة: عندما يكون لديك قيمة يمكن أن تكون واحدة من عدة أشكال متميزة، استخدم اتحادًا متميزًا. إنه حجر الزاوية للأنماط الآمنة من النوع في TypeScript.
• فرض الشمولية دائمًا: سواء كنت تستخدم خدعة `never` مع عبارة `switch` أو طريقة `.exhaustive()` الخاصة بالمكتبة، فلا تترك أبدًا مطابقة نمط مفتوحة. من هنا تأتي السلامة.
• اختر الأداة المناسبة: بالنسبة للحالات البسيطة، تكون عبارة `switch` جيدة. بالنسبة للمنطق المعقد أو المطابقة المتداخلة أو النمط الوظيفي الأكثر، ستعمل مكتبة مثل `ts-pattern` على تحسين إمكانية القراءة وتقليل القوالب النمطية بشكل كبير.
• حافظ على الأنماط قابلة للقراءة: الهدف هو الوضوح. تجنب الأنماط المتداخلة والمعقدة بشكل مفرط والتي يصعب فهمها في لمح البصر. في بعض الأحيان، يكون تقسيم التطابق إلى وظائف أصغر هو نهج أفضل.

الخلاصة: كتابة مستقبل JavaScript الآمن

مطابقة الأنماط هي أكثر من مجرد سكر بناء الجملة؛ إنه نموذج يؤدي إلى تعليمات برمجية أكثر تعريفية وقابلة للقراءة، والأهم من ذلك، أكثر قوة. بينما ننتظر بفارغ الصبر وصولها الأصلي إلى JavaScript، لسنا مضطرين إلى الانتظار لجني فوائدها.

من خلال تسخير قوة نظام الكتابة الثابتة الخاص بـ TypeScript، لا سيما مع الاتحادات المتميزة، يمكننا بناء أنظمة يمكن التحقق منها في وقت الترجمة. يغير هذا النهج بشكل أساسي اكتشاف الأخطاء من وقت التشغيل إلى وقت التطوير، مما يوفر ساعات لا تحصى من التصحيح ويمنع حوادث الإنتاج. تبني مكتبات مثل `ts-pattern` على هذا الأساس المتين، مما يوفر واجهة برمجة تطبيقات أنيقة وقوية تجعل كتابة تعليمات برمجية آمنة من النوع أمرًا ممتعًا.

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