خب توی این پست میخوایم در مورد Mapped Type ها در TS صحبت کنیم که به نظرم فیچر باحالیه و خیلی جاها میتونه کنه که از تکرار کدها کمک کنه و در واقع DRY رو رعایت کنید.

در حقیقت Mapped Type ها یک نوع Generic Type هستند که روی کلیدهای یک نوع دیگه تکرار میکنن و برای ما یک نوع جدید تولید میکنن. شاید یکم گیج کننده بنظر برسه ولی اصلا اینطور نیست. بگذارید با یه مثال ساده شروع کنیم.

ما را یک تایپ کنید به اسم تنظیمات داریم که شامل دو تابع برای حالت شب و نمایش پروفایل کاربر هستش.

حالا برای مثال، من میخوام یکتایپ دیگه درست کنم که شامل تمام پراپرتی‌هایSettings باشه، منتها نه به شکل تابع، بلکه به شکل اتریبیوت‌های ساده از نوع boolean. برای اینکار از Mapped Type استفاده می‌کنیم. اول یک نوع مینویسم به اسم Options.

همونطور که میبینید اینجا یک نوع استدلال به اسم ت داریم. با استفاده از keyof در واقعه های T رو پیمایش کردیم و برای هر کدوم نوع boolean رو در نظر گرفتیم. حالا بگذاريد به جاي T، اونتيپي كه خودمون نوشتيم يعني Settings رو پاس بديم و ببينم چي ميشه.

با استفاده از این نوع (یعنی Options) کاری که بتوانیم تایپ کنیم نهایی شده است یعنی SettingOptions مشابه Settings با این تفاوت است که تریبیوت هاش از نوع boolean هستن.

به طور کلی Mapped Type ها کارشون همینه. معمولاً اینطوریه که ما یکGeneric Type مینویسیم و داخل اون با استفاده از keyof، اتریبیوت های یک نوع رو تکرار میکنیم و از آونها تایپ و اتریبیوتهای مورد نظرمون رو ایجاد میکنیم. حالا اینجا وقتی ازMapped Type ها استفاده می کنیم، موقعیت ایجاد نوع جدید از یه‌سری فیچرهایی که می بینیم خیلی باحاله و خدا میدونه چقد میتونه به کارمون بیاد. بریم چنتاشونو ببینیم.

  • حذف یا اضافه کردن Modifier ها

اینجا منظور از Modifier ها فقط readonly و ? (به معنی اختیاری) هستن. موقع استفاده از Mapped Type می توانید فقط خواندنی یا اختیاری بودن اتریبیوت ها را حذف کنید یا مثلاً تمام اتریبیوت های نوع جدید رو اختیاری کنیم. چجوری !؟؟ با استفاده از پیشوندهای + و –

این مثال رو ببین. اینجا با اضافه کردن readonly+، تعیین می شود که نوع جدید همه ی تریبیوتهاش باید فقط خواندنی باشن و کسی نمیتونه تغییرشون بده. نوع اونهارو هم تغییر ندادیم و گذاشتیم مثل قبل بمونه. تی[key] در واقع نوع هر کدوم از اتریبیوت های تی را به ما میده. توجه کنید که کلید داینامیکه و داریم روی تمام اتریبیوت ها نوع موردنظرمون تکرار می زنیم.

یا مثلا توی این قطعه کد پایین ما اومدیم و با اضافه کردن ?-، به TS گفتیم که هیچکدوم از تریبیوت‌های نوع جدیدمون اختیاری باشن.

  • استفاده از Key Remapping

یعنی چی؟ یعنی اونجایی که داری کلیدهای یک نوع رویتره میکنی، می توانید یک سری اعمال روشون انجام بدی و یا یکسری هاشون را با یکسری شرایط حذف کنید یا مثلا اسمشون رو تغییر بدی. توی TS ورژن 4.1 به بعد با استفاده از کلمه کلیدی می توانید اینکارو انجام بدید. اینجارو ببین چه کار باحالی انجام دادیم:)

اینجا با استفاده از ۲فیچر انواع قالب تحت اللفظی و نقشه برداری مجدد کلید اومدیم و کلید های Person (قبل از کلمه کلیدی as) رورماپ کردیم به اون چیزی که خواستیم (بعد از کلمه کلیدیاها) و تبدیلشون شد به متد. اینم بگم که

اینجا هم روی کلیدهای Shape رو پیایش کردیم و گفتیم میخوایم نوع جدیدمون همه ی اتریبیوت‌های Shape رو داشته به غیر ازkind و خیلی راحت تونستیم با استفاده ازExclude (که باز برای TS تعریف شد) اینکارو انجام بدیم.

  • استفاده از انواع شرطی

ما می توانیم در Mapped Type ‌ ها از Conditional Type را هم استفاده کنیم و نوع های جدید رو با شرط های مختلف چک کنیم و در واقع شرطی تولید کنیم. مثال پایین رو نگاه کنین. اینجا اومدیم برای هر اتربیوت از Objects چک کنیم که آیا اون اتریبیوت ازShape ارث بری میکنه یا نه.

ارث بری کردن از Shape به این معنی هست که اون نوع که داره ارث بری میکنه، حتما اتریبیوت kind رو داشته باشه و مقدارشم یکی از ‘square’، ‘circle’ و یا’rectangle باشه باشه.

بنظرم فیچرهای TS مبحث جذابیه و تسلط به اونها باعث میشه پروژه رو خیلی حرفه ای تر دولوپ کنیم. بخاطر همین خوبه که بهشون بپردازیم و سعی میکنم در کاربردهاش بنویسم بازم.

اگر فیدبک، انتقاد، پیشنهاد یا هرچیز دیگه ای مدنظرتون هست خیلی ممنون میشم ازتون که برام کامنت کنین یا بهم پیام بدین

لینکدین: https://www.linkedin.com/in/sajjad-rahimi-890851231/

تلگرام: @sajjrhm

اگر دوست داشتی امتیاز دادن یادت نره!