استخدام TypeScript

TypeScript هي طريقة شائعة لإضافة تعريفات الأنواع إلى قواعد كود JavaScript. بشكل افتراضي، يدعم TypeScriptJSXويمكنك الحصول على دعم كامل لـ React Web عن طريق إضافة@types/react و @types/react-domإلى مشروعك.

التثبيت

جميعأطر عمل React ذات الجودة الإنتاجيةتقدم دعمًا لاستخدام TypeScript. اتبع الدليل المحدد للإطار للتثبيت:

• Next.js
• Remix
• Gatsby
• Expo

إضافة TypeScript إلى مشروع React موجود

لتثبيت أحدث إصدار من تعريفات الأنواع الخاصة بـ React:

npm install --save-dev @types/react @types/react-dom

يجب تعيين خيارات المترجم التالية في ملفtsconfig.jsonالخاص بك:

1. domيجب تضمينه فيlib(ملاحظة: إذا لم يتم تحديد خيارlib، يتم تضمينdomافتراضيًا).
2. jsxيجب تعيينه إلى أحد الخيارات الصالحة.preserveيجب أن يكون كافيًا لمعظم التطبيقات.وثائق jsxلمعرفة القيمة التي يجب اختيارها.

TypeScript مع مكونات React

كتابة TypeScript مع React تشبه إلى حد كبير كتابة JavaScript مع React. الفرق الرئيسي عند العمل مع مكون هو أنه يمكنك توفير أنواع لخاصيات (props) المكون الخاص بك. يمكن استخدام هذه الأنواع للتحقق من الصحة وتوفير توثيق مضمّن في المحررات.

بأخذمكون MyButtonمن دليلالبدء السريع، يمكننا إضافة نوع يصفtitleللزر:

هذه الصيغة المضمنة هي أبسط طريقة لتوفير أنواع للمكون، على الرغم من أنه بمجرد أن تبدأ في الحصول على بضعة حقول لوصفها قد تصبح مرهقة. بدلاً من ذلك، يمكنك استخدامinterfaceأوtypeلوصف خاصيات (props) المكون:

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

أمثلة على الـ Hooks

تتضمن تعريفات الأنواع من@types/reactأنواعًا للـ Hooks المدمجة، لذا يمكنك استخدامها في مكوناتك دون أي إعداد إضافي. تم بناؤها لأخذ الكود الذي تكتبه في مكونك في الاعتبار، لذا ستحصل علىأنواع مستنتجةفي كثير من الأحيان ومن الناحية المثالية لا تحتاج إلى التعامل مع تفاصيل توفير الأنواع.

ومع ذلك، يمكننا النظر في بعض الأمثلة حول كيفية توفير أنواع للـ Hooks.

useState

سيعيدHook الـ useStateاستخدام القيمة المُمرَّرة كحالة أولية لتحديد نوع القيمة. على سبيل المثال:

سيؤدي هذا إلى تعيين نوعbooleanلـenabled، وستكونsetEnabledدالة تقبل إما وسيطًا من نوعboolean، أو دالة تُرجعboolean. إذا كنت تريد توفير نوع صريح للحالة، يمكنك فعل ذلك عن طريق توفير وسيط نوع لاستدعاءuseState:

هذا ليس مفيدًا جدًا في هذه الحالة، لكن الحالة الشائعة التي قد ترغب فيها في توفير نوع هي عندما يكون لديك نوع اتحادي. على سبيل المثال، يمكن أن يكونstatusهنا أحد سلاسل نصية قليلة مختلفة:

أو، كما هو موصى به فيمبادئ تنظيم الحالة، يمكنك تجميع الحالة ذات الصلة ككائن ووصف الاحتمالات المختلفة عبر أنواع الكائنات:

useReducer

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

نحن نستخدم TypeScript في أماكن رئيسية قليلة:

• interface Stateتصف شكل حالة الـ reducer.
• type CounterActionتصف الإجراءات المختلفة التي يمكن إرسالها إلى الـ reducer.
• const initialState: Stateتوفر نوعًا للحالة الأولية، وكذلك النوع الذي يستخدمهuseReducerافتراضيًا.
• stateReducer(state: State, action: CounterAction): Stateتحدد أنواع وسيطات دالة الـ reducer وقيمتها المرجعة.

بديل أكثر وضوحًا لتحديد النوع علىinitialStateهو تقديم وسيط نوع لـuseReducer:

useContext

إنّHook useContextهو أسلوب لتمرير البيانات عبر شجرة المكونات دون الحاجة إلى تمرير الخصائص عبر المكونات. يتم استخدامه عن طريق إنشاء مكون موفر وغالبًا عن طريق إنشاء Hook لاستهلاك القيمة في مكون فرعي.

يتم استنتاج نوع القيمة التي يوفرها السياق من القيمة الممررة إلى استدعاءcreateContext:

يعمل هذا الأسلوب عندما يكون لديك قيمة افتراضية منطقية - ولكن هناك أحيانًا حالات لا يكون لديك فيها ذلك، وفي تلك الحالات قد يبدوnullمعقولًا كقيمة افتراضية. ومع ذلك، للسماح لنظام الأنواع بفهم كودك، تحتاج إلى تعيينContextShape | nullبشكل صريح علىcreateContext.

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

useMemo

سيقومuseMemoبإنشاء/إعادة الوصول إلى قيمة محفوظة من استدعاء دالة، مع إعادة تشغيل الدالة فقط عندما تتغير التبعيات الممررة كمعامل ثانٍ. يتم استنتاج نتيجة استدعاء الـ Hook من القيمة المرجعة من الدالة في المعامل الأول. يمكنك أن تكون أكثر وضوحًا من خلال تقديم وسيط نوع للـ Hook.

useCallback

يقدمuseCallbackمرجعًا ثابتًا لدالة طالما أن التبعيات الممررة في المعامل الثاني هي نفسها. مثلuseMemo، يتم استنتاج نوع الدالة من القيمة المرجعة للدالة في المعامل الأول، ويمكنك أن تكون أكثر وضوحًا من خلال تقديم وسيط نوع للـ Hook.

عند العمل في الوضع الصارم لـ TypeScript، يتطلبuseCallbackإضافة أنواع لمعاملات رد النداء الخاص بك. هذا لأن نوع رد النداء يتم استنتاجه من القيمة المرجعة للدالة، وبدون المعاملات لا يمكن فهم النوع بشكل كامل.

اعتمادًا على تفضيلات أسلوب الكود الخاص بك، يمكنك استخدام دوال*EventHandlerمن أنواع React لتوفير نوع معالج الأحداث في نفس وقت تعريف رد النداء:

أنواع مفيدة

هناك مجموعة واسعة جدًا من الأنواع تأتي من حزمة@types/react، وهي تستحق القراءة عندما تشعر بالراحة في كيفية تفاعل React و TypeScript. يمكنك العثور عليهافي مجلد React في DefinitelyTyped. سنغطي هنا بعض الأنواع الأكثر شيوعًا.

أحداث DOM

عند العمل مع أحداث DOM في React، يمكن غالبًا استنتاج نوع الحدث من معالج الحدث. ومع ذلك، عندما تريد استخراج دالة لتمريرها إلى معالج حدث، ستحتاج إلى تعيين نوع الحدث بشكل صريح.

هناك العديد من أنواع الأحداث المقدمة في أنواع React - يمكن العثور على القائمة الكاملةهناوهي تستند إلىالأحداث الأكثر شيوعًا من DOM.

عند تحديد النوع الذي تبحث عنه، يمكنك أولاً النظر إلى معلومات التمرير (hover) لمعالج الحدث الذي تستخدمه، والتي ستظهر نوع الحدث.

إذا كنت بحاجة إلى استخدام حدث غير مدرج في هذه القائمة، يمكنك استخدام النوعReact.SyntheticEvent، وهو النوع الأساسي لجميع الأحداث.

الأبناء (Children)

هناك مساران شائعان لوصف أبناء المكون. الأول هو استخدام النوعReact.ReactNode، وهو اتحاد لجميع الأنواع الممكنة التي يمكن تمريرها كأبناء في JSX:

هذا تعريف واسع جدًا للأبناء. الثاني هو استخدام النوعReact.ReactElement، وهو عناصر JSX فقط وليس القيم الأولية في JavaScript مثل السلاسل النصية أو الأرقام:

لاحظ أنه لا يمكنك استخدام TypeScript لوصف أن الأبناء هم نوع معين من عناصر JSX، لذلك لا يمكنك استخدام نظام الأنواع لوصف مكون يقبل فقط أبناء من نوع<li>.

يمكنك رؤية مثال لكل منReact.ReactNode و React.ReactElementمع مدقق الأنواع فيملعب TypeScript هذا.

خاصية النمط (Style Props)

عند استخدام الأنماط المضمنة (inline styles) في React، يمكنك استخدامReact.CSSPropertiesلوصف الكائن الذي يتم تمريره إلى خاصيةstyle. هذا النوع هو اتحاد لجميع خصائص CSS الممكنة، وهو طريقة جيدة لضمان أنك تمرر خصائص CSS صالحة إلى خاصيةstyle، وللحصول على الإكمال التلقائي في محررك.

مزيد من التعلم

قد تحتوي صفحات API الفردية في الوثائق على وثائق أكثر تعمقًا حول كيفية استخدامها مع TypeScript.

نوصي بالموارد التالية:

• كتيب TypeScriptهو الوثائق الرسمية لـ TypeScript، ويغطي معظم ميزات اللغة الرئيسية.
• ملاحظات إصدار TypeScriptتغطي الميزات الجديدة بعمق.
• ورقة الغش لـ React مع TypeScriptهي ورقة غش يحتفظ بها المجتمع لاستخدام TypeScript مع React، وتغطي الكثير من الحالات المتطرفة المفيدة وتوفر نطاقًا أوسع من هذه الوثيقة.
• مجتمع TypeScript على Discordهو مكان رائع لطرح الأسئلة والحصول على مساعدة في مشكلات TypeScript و React.