المقدمة

يعتبر إكتشاف الأخطاء مبكراً أمراً جيداً في البرمجة ، وفي مكتبة React يعتبر هذا الأمر مهماً بالأخص في حالة تمرير setter function إلى component أو إذا كنت ستستخدم event handler.

التحقق من setState

في البدء يجب أن نعرف أن useState هو عبارة عن hook في React يستخدم لحفظ المتغيرات وتعدليها ، ويتم طريق تحديد عملية الـre-render من خلاله ، كما يقوم بإرجاغ مصفوفة تحتوى على قيمتين : 1- القيمة الحالية - current state 2- الدالة التي تستخدم لتغير قيمة الـ state الحالية - setfFunc

في حالة تمرير دالة setFunc يجب توضيح ما هي هذه الدالة وماذا سترجع وهذا يتم عن طريق : <<React.Dispatch<React.SetStateAction<T

Copytypescript
1import React, { Dispatch, SetStateAction } from 'react';
2interface ChildProps {
3  // Replace 'string' with whatever your state type is
4  setCount: Dispatch<SetStateAction<number>>; 
5}
6  const Child = ({ setCount }: ChildProps) => {
7  return <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>;
8};

التعامل مع الـ Event Handlers

في حالة الـevent handlers مثل onClick - onClose - onSubmit الخ.. ، أنت بحاجة لتحديد الـarguments التي تتوقعها الـدالة ، وماذا سترجّع ؟ في حالة الدالة التي لا ترجع شيء يتم استخدام void في حالة الكتابة داخل Input يتم استخدام

Copytypescript
1interface {
2  onChange:(event:React.ChangeEvent<HTMLInputElement>) => void
3}

في حالة Mouse events مثل onClick

Copytypescript
1interface{
2onClick : (event:React.MouseEvent<HTMLButtonElement>) =>void
3}