React/static type checking

تتعرّف أدوات التحقّق من الأنواع الثابتة (Static type checkers، والمقصود بها التحقّق من الأنواع في زمن التصريف compile-time حيث لا يُسمَح بتغيير أنواع المتغيّرات في زمن التنفيذ) مثل Flow و TypeScript على بعض أنواع المشاكل قبل تنفيذ الشيفرة، وتُحسِّن سير عمل المُطوِّر عن طريق إضافة ميّزات مثل الإكمال التلقائي. نُوصي لهذا السّبب باستخدام Flow أو TypeScript بدلًأ من PropTypes للشيفرات الكبيرة.

Flow

تُعدُّ Flow أداة تحقّق من الأنواع الثابتة لشيفرة JavaScript، وهي مُطوِّرة من قبل Facebook وتُستخدَم عادةً مع React. تسمح لك هذه الأداة بتوصيف المتغيّرات والدوال ومُكوِّنات React عن طريق صياغة خاصّة للأنواع، كما تسمح باكتشاف الأخطاء باكرًا. بإمكانك قراءة هذه المقدّمة إلى Flow وتعلّم مبادئها.

تحتاج لاستخدام Flow إلى ما يلي:

• إضافة Flow إلى مشروعك كاعتماديّة (dependency).
• التأكّد من إزالة صياغة Flow من الشيفرة المُصرَّفة.
• إضافة توصيفات الأنواع (type annotations) لتشغيل Flow والتحقّق من هذه الأنواع.

سنشرح هذه الخطوات بالتفصيل الآن.

إضافة Flow إلى مشروعك

انتقل أولًا إلى مجلّد مشروعك باستخدام واجهة سطر الأوامر، ستحتاج إلى تنفيذ الأوامر التالية:

إن كنتَ تستخدم Yarn فاكتب ما يلي:

yarn add --dev flow-bin

إن كنتَ تستخدم npm فاكتب ما يلي:

npm install --save-dev flow-bin

يُثبِّت هذا الأمر الإصدار الأخير من Flow في مشروعك. أضف الآن flow إلى القسم "scripts" من ملف package.json لتتمكّن من استخدام هذا الأمر من خلال واجهة سطر الأوامر:

{
  // ...
  "scripts": {
    "flow": "flow",
    // ...
  },
  // ...
}