کانفیگ Context با typescript

چند وقتیه که به صورت مستمر پیگیر ری‌اکتم . تا حالا دنبال تایپ‌اسکریپت نرفته بودم و تا اینکه دلو زدم به دریا و رفتم سراغش . در کمال ناباوری دیدم چقد خفنه و چقد کد رو تمیز میکنه .

تصمیم گرفتم یه مقاله بنویسم و یه توضیحاتی راجبه کانفیگ کانتکست با تایپ‌اسکریپت بدم و باهم یه todolist ساده با قابلیت اضافه کردن todo بزنیم .

خب اول از همه باید ts رو به پروژه اضافه کنیم با دستور

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

خب میریم سراغه تعریف type و interface ها . میتونید همه رو تو یه فایلی مثلا به اسمه types.ts بریزید و یا تو هر کامپوننت اینترفیس تعریف کنید.

حالا من همرو جدا کردم تو یه فایل به اسمه types.ts :

خب یک فایلی به نام Context.tsx میسازیم و توی اون کانتکستمونو قرار میدیم :‌

همونطور که میبینید تایپ کانتکست یه آرایه ای از اینترفیس ITodo هست . بنابراین با اینکار provider و consumer هم تایپشون یکی میشه .

خب حالا initialState چیه ؟ اینه :

قبله این که بریم سراغ reducer یکسری interface برای اکشن ها تو فایله types.ts ست میکنیم :

همونجور که معلومه یه اینترفیس پایه برای اکشن در نظر گرفتیم و هر اکشن با توجه به payload از اون extend میشه . و در آخر یه تایپ تعریف میکنیم که همه اکشن هایی که داریم رو با هم or میکنه (حالا اینجا یکی بیشتر نیس و اونم ContextAddTodoAction هست )

خب میریم سراغه همون فایله Context.tsx و شرو میکنیم به نوشتن reducer و provider

از useReducer اینجور استفاده میکنیم :‌

تو قسمته React.Reducer ، دوتا پارامتر برا تایپ داریم ، اولی تایپه استیتمون هست که یه آرایه از ITodo هاست و دومی هم تایپ اکشن هامونه ک قبلا با هم or شده بودن .

و reducer هم به این شکل:

و provider نیز :

خب اینجا یه مشکلی پیش میاد و اونم اینه که وقتی ما تایپه اولیه کانتکست رو گذاشتیم [ ]ITodo ، تایپ provider هم باید [ ]ITodo باشه . ولی همونجور ک میبینید تایپ value یه آبجکته .

برای حل این مشکل کافیه تایپه کانتکستمونو عوض کنیم و این ریختی شه :‌

تایپه کانتکست شد یه آبجکت که یه todos داره و یه dispatch . ورودی dispatch یه action هست و این تابع چیزی بر نمیگردونه void و مقدار اولیش هم یه فانکشن خالی میذاریم .

حالا فقط کافیه context رو export کنیم :‌

تمامم !!!