عرض مصدر React/static type checking

<noinclude>{{DISPLAYTITLE:التحقّق من الأنواع الثابتة في React}}</noinclude>
تتعرّف أدوات التحقّق من الأنواع الثابتة (Static type checkers، والمقصود بها التحقّق من الأنواع في زمن التصريف compile-time حيث لا يُسمَح بتغيير أنواع المتغيّرات في زمن التنفيذ) مثل Flow و TypeScript على بعض أنواع المشاكل قبل تنفيذ الشيفرة، وتُحسِّن سير عمل المُطوِّر عن طريق إضافة ميّزات مثل الإكمال التلقائي. نُوصي لهذا السّبب باستخدام [https://flow.org/ Flow] أو [https://www.typescriptlang.org/ TypeScript] بدلًأ من <code>PropTypes</code> للشيفرات الكبيرة.

== Flow ==
تُعدُّ [https://flow.org/ Flow] أداة تحقّق من الأنواع الثابتة لشيفرة JavaScript، وهي مُطوِّرة من قبل Facebook وتُستخدَم عادةً مع React. تسمح لك هذه الأداة بتوصيف المتغيّرات والدوال ومُكوِّنات React عن طريق صياغة خاصّة للأنواع، كما تسمح باكتشاف الأخطاء باكرًا. بإمكانك قراءة هذه [https://flow.org/en/docs/getting-started/ المقدّمة إلى Flow] وتعلّم مبادئها.

تحتاج لاستخدام Flow إلى ما يلي:
* إضافة Flow إلى مشروعك كاعتماديّة (dependency).
* التأكّد من إزالة صياغة Flow من الشيفرة المُصرَّفة.
* إضافة توصيفات الأنواع (type annotations) لتشغيل Flow والتحقّق من هذه الأنواع.
سنشرح هذه الخطوات بالتفصيل الآن.

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

إن كنتَ تستخدم [https://yarnpkg.com/ Yarn] فاكتب ما يلي:<syntaxhighlight lang="text">
yarn add --dev flow-bin

</syntaxhighlight>إن كنتَ تستخدم [https://www.npmjs.com/ npm] فاكتب ما يلي:<syntaxhighlight lang="text">
npm install --save-dev flow-bin

</syntaxhighlight>يُثبِّت هذا الأمر الإصدار الأخير من Flow في مشروعك.

أضف الآن flow إلى القسم <code>"scripts"</code> من ملف <code>package.json</code> لتتمكّن من استخدام هذا الأمر من خلال واجهة سطر الأوامر:<syntaxhighlight lang="text">
{
  // ...
  "scripts": {
    "flow": "flow",
    // ...
  },
  // ...
}

</syntaxhighlight>وأخيرًا نفِّذ أحد الأوامر التالية:

إن كنتَ تستخدم [https://yarnpkg.com/ Yarn] فاكتب ما يلي:<syntaxhighlight lang="text">
yarn run flow init

</syntaxhighlight>إن كنتَ تستخدم [https://www.npmjs.com/ npm] فاكتب ما يلي:<syntaxhighlight lang="text">
npm run flow init

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

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

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

==== إنشاء تطبيق React ====
إن أعددتَ مشروعك باستخدام الأمر <code>[https://github.com/facebookincubator/create-react-app create-react-app]</code> فستُزال توصيفات Flow افتراضيًّا لذا لن تحتاج لفعل أي شيء في هذه الخطوة.

==== Babel ====
ملاحظة: هذه التعليمات ليست للمستخدمين الذين يبنون مشروعهم باستخدام الأمر <code>[https://github.com/facebookincubator/create-react-app create-react-app]</code>، حتى ولو كان هذا الأمر يستخدم Babel ضمنيًّا،  فهو مُعَد لفهم Flow مُسبقًا. اتبع هذه الخطوات فقط في حالة لم تكن تستخدم الأمر <code>[https://github.com/facebookincubator/create-react-app create-react-app]</code>.

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

إن كنتَ تستخدم [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": [
    "@babel/preset-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.]

== TypeScript ==
إنّ TypeScript هي لغة برمجة مُطوَّرة من قبل Microsoft. وهي مجموعة عُليا من JavaScript تتضمّن مُصرِّف خاص بها. ولكونها لغةً ثابتة الأنواع فهي قادرة على اكتشاف الأخطاء في زمن البناء قبل أن يُصبِح تطبيقك مُتاحًا للعامّة بفترة طويلة. بإمكانك معرفة المزيد حول استخدام TypeScript مع React من [https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter هنا].

لاستخدام TypeScript تحتاج إلى ما يلي:
* إضافة TypeScript كاعتماديّة (dependency) في مشروعك.
* إعداد خيارات مُصرِّف TypeScript.
* استخدام الامتداد الصحيح للملفّات.
* إضافة تعريفات للمكتبات التي تستخدمها.
فلنتعرّف بشكل مفصّل إلى هذه المتطلّبات.

=== استخدام TypeScript عبر الأمر <code>create-react-app</code> ===
تدعم <code>create-react-app</code> ضمنيا TypeScript .

لإنشاء مشروع جديد يدعم TypeScript، نفذ الأمر التالي:<syntaxhighlight lang="text">
npx create-react-app my-app --template typescript

</syntaxhighlight>يمكنك أيضًا إضافته إلى مشروع مُنشأ سلفا عبر <code>create-react-app</code> كما هو [https://facebook.github.io/create-react-app/docs/adding-typescript مُبيّن هنا].

'''ملاحظة''': إذا كنت تستخدم تطبيقًا مُنشأً عبر  <code>create-react-app</code>، فيمكنك تخطي بقية هذه الصفحة. إذ تشرح الإعدادات اليدوية، وهي لا تنطبق على مستخدمي <code>create-react-app</code>.

=== إضافة TypeScript إلى مشروعك ===
تُضاف TypeScript إلى مشروعك باستخدام أمر واحد.

إن كنتَ تستخدم [https://yarnpkg.com/ Yarn] فاكتب ما يلي:<syntaxhighlight lang="text">
yarn add --dev typescript

</syntaxhighlight>إن كنتَ تستخدم [https://www.npmjs.com/ npm] فاكتب ما يلي:<syntaxhighlight lang="text">
npm install --save-dev typescript

</syntaxhighlight>بهذا يكون لديك آخر إصدار من TypeScript في مشروعك. يُتيح لك تثبيت TypeScript الوصول إلى الأمر <code>tsc</code>. قبل الإعداد فلنُضِف هذا الأمر إلى قسم <code>"scripts"</code> في ملف <code>package.json</code>:<syntaxhighlight lang="text">
{
  // ...
  "scripts": {
    "build": "tsc",
    // ...
  },
  // ...
}

</syntaxhighlight>

=== إعداد مصرف TypeScript ===
لن يُفيدنا المُصرِّف (Compiler) ما لم نُخبره ماذا سيفعل. تُعرَّف هذه القواعد في TypeScript عن طريق ملف خاص يُدعى tsconfig.json. لتوليد هذا الملف نفّذ الأمر التالي:

إن كنتَ تستخدم [https://yarnpkg.com/ Yarn] فاكتب ما يلي:<syntaxhighlight lang="text">
yarn run tsc --init

</syntaxhighlight>إن كنتَ تستخدم [https://www.npmjs.com/ npm] فاكتب ما يلي:<syntaxhighlight lang="text">
npx tsc --init

</syntaxhighlight>

بإمكانك أن ترى الآن العديد من الخيارات في الملف <code>tsconfig.json</code>، والتي تستخدم لإعداد المُصرِّف. للحصول على شرح مفصّل عن كل الخيارات انتقل إلى [https://www.typescriptlang.org/docs/handbook/tsconfig-json.html هذه الصفحة].

سنتحدّث من بين هذه الخيارات عن <code>rootDir</code> و <code>outDir</code>. ففي الواقع يأخذ المُصرِّف ملفّات typescript ويولِّد من خلالها ملفّات JavaScript، ولكن لا نرغب بان تختلط تلك الملفّات الناتجة مع ملفّاتنا المصدرية. سنحل هذه المشكلة بخطوتين:
* فلنُرتِّب أولًا بنية مشروعنا كالتالي، حيث سنضع كافّة ملفّات شيفرتنا المصدرية في المجلّد <code>src</code>:
<syntaxhighlight lang="text">
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

</syntaxhighlight>
* بعد ذلك نُخبِر المُصرِّف أين تقع ملفّات شيفرتنا المصدريّة وأين ينبغي أن يضع الملفّات الناتجة:
<syntaxhighlight lang="text">
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",
    "outDir": "build"
    // ...
  },
}

</syntaxhighlight>رائع! عندما نُنفِّذ الآن أوامر البناء سيضع المُصرِّف ملفّات JavaScript الناتجة في المجلّد <code>build</code>. بإمكانك تحميل ملف الإعدادات <code>tsconfig.json</code> بشكلٍ جاهز للبدء والتعامل مع React حيث يحتوي على مجموعة جيدة من القواعد للبدء.

لا ترغب بشكلٍ عام أن تحتفظ بملفّات JavaScript الناتجة مع الملفّات المصدريّة لذا احرص على إضافة المجلّد <code>build</code> إلى الملف <code>‎.gitignore</code>.

=== امتدادات الملفات ===
تكتب عادةً مُكوِّناتك في React باستخدام ملفّات ذات الامتداد ‎<code>.js</code>، أمّا في TypeScript فلدينا امتدادان للملفّات، الأول هو <code>‎.ts</code> وهو الامتداد الافتراضي، والثاني ‎<code>.tsx</code> وهو امتداد خاص يُستخدَم للملفّات التي تحتوي على صياغة JSX.

=== تشغيل TypeScript ===
إن اتبعتَ التعليمات السّابقة فستكون قادرًا على تشغيل TypeScript للمرّة الأولى:<syntaxhighlight lang="text">
yarn build

</syntaxhighlight>إن كنتَ تستخدم [https://www.npmjs.com/ npm] فاكتب ما يلي:<syntaxhighlight lang="text">
npm run build

</syntaxhighlight>إن لم يظهر لديك أي ناتج فهذا يعني أنّك أتممت الخطوات بنجاح.

=== تعريفات الأنواع ===
يعتمد المُصرِّف على ملفات التعريف لإظهار الأخطاء والتلميحات من الحزم الأخرى. يُزوِّدنا ملف التعريف بمعلومات الأنواع لمكتبة ما. يُمِكّننا ذلك من استخدام مكتبات JavaScript في مشروعنا كتلك التي نحصل عليها من npm.

هناك طريقتان أساسيتان للحصول على تعريفات المكتبة:

-'''مُضمَّنة مع المكتبة (Bundled):''' حيث تُضمِّن المكتبة ملف تعريفاتها الخاص. وهو أمرٌ جيّد لنا لأنّ كل ما يجب فعله هو تثبيت المكتبة ومن ثمّ يُمكننا استخدامها فورًا. لتعرف إن كانت المكتبة تُضمِّن تعاريف الأنواع ابحث عن الملف <code>index.d.ts</code> في المشروع. تمتلك بعض المكتبات هذا الملف مُحدّدًا ضمن الملف <code>package.json</code> في القسم <code>typings</code> أو <code>types</code>.
* '''عن طريق [https://github.com/DefinitelyTyped/DefinitelyTyped DefinitelyTyped]:''' وهو مستودع كبير لتعريفات المكتبات التي لا تُضمِّن ملف تعريفات. تُدار هذه التعريفات من قبل Microsoft ومُساهمين يُقدّمون تعريفات مفتوحة المصدر. فمثلًا لا تُضمِّن React ملف تعريفات لها ونحصل عليه بدلًا من ذلك عن طريق DefinitelyTyped. لفعل ذلك نفّذ الأمر التالي:
<syntaxhighlight lang="text">
# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react
</syntaxhighlight>
* '''التعريفات المحلية:''' قد لا تُضمِّن بعض الحزم تعريفاتها ولا نجد لها تعريفًا في مستودع DefinitelyTyped. في تلك الحالة بإمكاننا الحصول على ملف تعريفات محلي. لفعل ذلك أنشئ الملف <code>declarations.d.ts</code> في المجلد الجذر الخاص بالملفات المصدرية. يبدو التعريف البسيط كما يلي:
<syntaxhighlight lang="text">
declare module 'querystring' {
  export function stringify(val: object): string
  export function parse(val: string): object
}
</syntaxhighlight>أصبحتَ الآن جاهزًا لكتابة الشيفرة. نُوصي بالاطلاع على المصادر التالية لتعلم المزيد حول TypeScript:
* [https://www.typescriptlang.org/docs/handbook/basic-types.html توثيق TypeScript: الأنواع الأساسية].
* [http://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html توثيق TypeScript: الانتقال من JavaScript].
* [http://www.typescriptlang.org/docs/handbook/react-&-webpack.html توثيق TypeScript: استخدام React مع Webpack].

== Reason ==
لا تُعتبر [https://reasonml.github.io/ Reason] لغة جديدة، بل هي صياغة جديدة وسلسلة أدوات مدعومة من قبل لغة [http://ocaml.org/ OCaml]. تعطي Reason لغة OCaml صياغة مألوفة موجهة لمبرمجي JavaScript مع دعم npm و Yarn.

تُطوَّر Reason من قبل Facebook وتُستخدَم في بعض منتجاتها مثل Messenger. تُعتَبر هذه الصياغة تجريبية نوعًا ما ولكن لها [https://reasonml.github.io/reason-react/ ارتباطات قوية مع React] ومدعومة من قبل Facebook و[https://reasonml.github.io/docs/en/community.html مجتمع كبير على github].

== Kotlin ==
[[Kotlin]] هي لغة برمجة ثابتة الأنواع (statically typed أي لا تسمح بتغيير أنواع المتغيرات في زمن التنفيذ) مُطوَّرة من قبل JetBrains. تتضمّن المنصات الموجهة لها نظام الأندرويد، وبيئة JVM، و LLVM، و [https://kotlinlang.org/docs/reference/js-overview.html JavaScript].

تُطوِّر JetBrains أدوات عديدة مُخصّصة لمجتمع React، منها [https://github.com/JetBrains/kotlin-wrappers React bindings] و <code>[https://github.com/JetBrains/create-react-kotlin-app create-react-kotlin-app]</code>. تُساعِدك هذه الأداة الأخيرة على بناء تطبيقات React باستخدام Kotlin بدون الحاجة لإعدادات.

== لغات أخرى ==
هنالك بعض لغات البرمجة الأخرى ثابتة الأنواع التي تُصرَّف شيفرتها إلى JavaScript ولذلك هي متوافقة مع React، نجد منها <code>[http://fable.io/ F#/Fable]</code> مع <code>[https://elmish.github.io/react elmish-react]</code>. اطّلع على مواقع هذه اللغات للمزيد من المعلومات وأخبرنا عن أي لغات أخرى ثابتة الأنواع متوافقة مع React لإضافتها لهذه الصفحة.
== انظر أيضًا ==
* [[React/jsx in depth|شرح JSX بالتفصيل]]
* [[React/typechecking with proptypes|التحقق من الأنواع باستخدام PropTypes]]
* [[React/refs and the dom|استخدام المراجع مع DOM]]
* [[React/uncontrolled components|المكونات غير المضبوطة]]
* [[React/optimizing performance|تحسين الأداء]]
* [[React/react without es6|React بدون ES6]]
* [[React/react without jsx|React بدون JSX]]
* [[React/reconciliation|المطابقة (Reconciliation)]]
* [[React/context|استخدام السياق (Context) في React]]
* [[React/fragments|استخدام الأجزاء (Fragments) في React]]
* [[React/portals|المداخل (Portals) في React]]
* [[React/error boundaries|حدود الأخطاء]]
* [[React/web components|مكونات الويب]]
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
* [[React/forwarding refs|تمرير المراجع]]
* [[React/render props|خاصيات التصيير]]
* [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]]
* [[React/accessibility|سهولة الوصول]]
* [[React/code splitting|تقسيم الشيفرة]]
* [[React/strict mode|الوضع الصارم (Strict Mode)]]

== مصادر==
*[https://reactjs.org/docs/static-type-checking.html صفحة التحقّق من الأنواع الثابتة في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React Advanced Guides]]