کار با React Context در TypeScript

کار با React Context در TypeScript آسان است اما باید برنامه نویسی ری اکت را از قبل آموزش دیده باشید به همین دلیل اگر در این زمینه اطلاعاتی ندارید بهتر است قبل از هرکاری در دوره ری اکت راست چین اکادمی شرکت کرده و آموزش های لازم را ببینید

ری اکت react چیست؟

React یک کتابخانه JavaScript front-end رایگان و منبع باز برای ساخت رابط های کاربری بر اساس کامپوننت ها است. این توسط متا و جامعه ای از توسعه دهندگان و شرکت ها نگهداری می شود. React می تواند برای توسعه برنامه های تک صفحه ای، تلفن همراه یا رندر شده توسط سرور با چارچوب هایی مانند Next.js استفاده شود.

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

تصمیم گرفتم یه مقاله بنویسم و یه توضیحاتی راجبه کانفیگ کانتکست با تایپ‌اسکریپت بدم و باهم یه 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 کنیم :‌

در نتیجه

کار با React Context در TypeScript یکی نیازکاربران است که در این مقاله سعی کردیم به صورت 0 تا 100 این موضوع را برای شما عزیزان آموزش بدهیم.

از این که تا اینجا همراه ما بودید ممنونیم.

موفق باشید

منبع