الفرق بين المراجعتين ل"React/static type checking"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 55: سطر 55:
 
إن أعددت Babel يدويًّا لمشروعك فستحتاج إلى تثبيت إعداد مُسبَق خاص من أجل Flow.
 
إن أعددت Babel يدويًّا لمشروعك فستحتاج إلى تثبيت إعداد مُسبَق خاص من أجل Flow.
  
إن كنتَ تستخدم [https://yarnpkg.com/ Yarn] فاكتب ما يلي:
+
إن كنتَ تستخدم [https://yarnpkg.com/ Yarn] فاكتب ما يلي:<syntaxhighlight lang="text">
 +
yarn add --dev babel-preset-flow
 +
 
 +
</syntaxhighlight>إن كنتَ تستخدم [https://www.npmjs.com/ npm] فاكتب ما يلي:<syntaxhighlight lang="text">
 +
npm install --save-dev babel-preset-flow
 +
 
 +
</syntaxhighlight>أضف الآن إعداد flow إلى [http://babeljs.io/docs/usage/babelrc/ إعدادات Babel]. فإن أعددتَ Babel باستخدام الملف ‎<code>.babelrc</code> فسيبدو كما يلي:<syntaxhighlight lang="text">
 +
{
 +
  "presets": [
 +
    "flow",
 +
    "react"
 +
  ]
 +
}
 +
 
 +
</syntaxhighlight>سيسمح لك ذلك باستخدام صياغة Flow في شيفرتك.
 +
 
 +
'''ملاحظة:''' لا تتطلّب Flow وجود الإعداد المُسبَق react، ولكنّهما عادةً يُستخدمَان معًا. تفهم Flow بحدّ ذاتها صياغة JSX.
 +
 
 +
==== إعدادات البناء الأخرى ====
 +
إن لم تكن تستخدم الأمر <code>[https://github.com/facebookincubator/create-react-app create-react-app]</code> أو Babel فبإمكانك استعمال [https://github.com/flowtype/flow-remove-types flow-remove-types] لإزالة توصيفات الأنواع.
 +
 
 +
=== تشغيل Flow ===
 +
إن اتبعتَ التعليمات السّابقة فينبغي أن تكون قادرًا على تشغيل Flow للمرّة الأولى:<syntaxhighlight lang="text">
 +
yarn flow
 +
 
 +
</syntaxhighlight>وإن كنتَ تستخدم npm فاكتب ما يلي:<syntaxhighlight lang="text">
 +
npm run flow
 +
 
 +
</syntaxhighlight>يجب أن تظهر لك رسالة كما يلي:<syntaxhighlight lang="text">
 +
No errors!
 +
✨  Done in 0.17s.
 +
 
 +
</syntaxhighlight>
 +
 
 +
=== إضافة توصيفات أنواع Flow ===
 +
تتحقّق Flow افتراضيًّا فقط من الملفّات التي تحتوي على علامة التوصيف هذه:<syntaxhighlight lang="text">
 +
// @flow
 +
 
 +
</syntaxhighlight>يجب وضعها في بداية الملف. جرّب إضافة بعض الملفات إلى مشروعك وتنفيذ الأمر <code>yarn flow</code> أو <code>npm run flow</code> لترى إن وجدت Flow أيّة مشاكل.
 +
 
 +
هنالك أيضًا [https://flow.org/en/docs/config/options/#toc-all-boolean خيار] لإجبار Flow على التحقّق من كل الملفّات بغض النظر عن علامة التوصيف السابقة الموجودة في بداية الملف. قد يكون هذا مُزعجًا للمشاريع الموجودة حاليًّا ولكنّه خيار منطقي للمشاريع الجديدة.
 +
 
 +
الآن بعد أن انتهينا من إعداد كل شيء نُوصي بالاطلاع على هذه المصادر لتعلّم المزيد حول Flow:
 +
* [https://flow.org/en/docs/types/ توثيق Flow: توصيفات الأنواع.]
 +
* [https://flow.org/en/docs/editors/ توثيق Flow: المُحرِّرات.]
 +
* [https://flow.org/en/docs/react/ توثيق Flow: استخدام Flow مع React.]
 +
* [https://medium.com/flow-type/linting-in-flow-7709d7a7e969 التحقّق من الأخطاء في Flow.]

مراجعة 23:46، 30 يوليو 2018

تتعرّف أدوات التحقّق من الأنواع الثابتة (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",
    // ...
  },
  // ...
}

وأخيرًا نفِّذ أحد الأوامر التالية: إن كنتَ تستخدم Yarn فاكتب ما يلي:

yarn run flow init

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

npm run flow init

سيُنشِئ هذا الأمر ملف إعدادت Flow.

إزالة صياغة Flow من الشيفرة المصرفة

تُمِد Flow لغة JavaScript بصياغة خاصّة لتوصيف الأنواع، ولكن على الرغم من ذلك لا تكون المتصفّحات على دراية بهذه الصياغة، لذلك نحتاج إلى التأكّد من ألّا تنتهي هذه الصياغة ضمن حزمة JavaScript المُصرفة المُرسلَة إلى المتصفّح.

تعتمد الطريقة الصحيحة لفعل ذلك على الأدوات التي تستخدمها لتصريف شيفرة JavaScript.

إنشاء تطبيق React

إن أعددتَ مشروعك باستخدام الأمر create-react-app فستُزال توصيفات Flow افتراضيًّا لذا لن تحتاج لفعل أي شيء في هذه الخطوة.

Babel

ملاحظة: هذه التعليمات ليست للمستخدمين الذين يبنون مشروعهم باستخدام الأمر create-react-app، حتى ولو كان هذا الأمر يستخدم Babel ضمنيًّا،  فهو مُعَد لفهم Flow مُسبقًا. اتبع هذه الخطوات فقط في حالة لم تكن تستخدم الأمر create-react-app.

إن أعددت Babel يدويًّا لمشروعك فستحتاج إلى تثبيت إعداد مُسبَق خاص من أجل Flow.

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

yarn add --dev babel-preset-flow

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

npm install --save-dev babel-preset-flow

أضف الآن إعداد flow إلى إعدادات Babel. فإن أعددتَ Babel باستخدام الملف ‎.babelrc فسيبدو كما يلي:

{
  "presets": [
    "flow",
    "react"
  ]
}

سيسمح لك ذلك باستخدام صياغة Flow في شيفرتك.

ملاحظة: لا تتطلّب Flow وجود الإعداد المُسبَق react، ولكنّهما عادةً يُستخدمَان معًا. تفهم Flow بحدّ ذاتها صياغة JSX.

إعدادات البناء الأخرى

إن لم تكن تستخدم الأمر create-react-app أو Babel فبإمكانك استعمال flow-remove-types لإزالة توصيفات الأنواع.

تشغيل Flow

إن اتبعتَ التعليمات السّابقة فينبغي أن تكون قادرًا على تشغيل Flow للمرّة الأولى:

yarn flow

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

npm run flow

يجب أن تظهر لك رسالة كما يلي:

No errors!
✨  Done in 0.17s.

إضافة توصيفات أنواع Flow

تتحقّق Flow افتراضيًّا فقط من الملفّات التي تحتوي على علامة التوصيف هذه:

// @flow

يجب وضعها في بداية الملف. جرّب إضافة بعض الملفات إلى مشروعك وتنفيذ الأمر yarn flow أو npm run flow لترى إن وجدت Flow أيّة مشاكل.

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

الآن بعد أن انتهينا من إعداد كل شيء نُوصي بالاطلاع على هذه المصادر لتعلّم المزيد حول Flow: