آشنایی با Utility Type های کاربردی Typescript

سلام عزیزان 👋 امیدوارم ایام به کام باشه و حال دلتون حسابی خوب باشه. تو این مقاله قصد دارم به برخی از Utility Type های کاربردی Typescript که در لیست زیر آورده شدن بپردازم و پیشاپیش امیدوارم که براتون مفید باشه.

• Partial
• Required
• Readonly
• Record
• Pick
• Omit
• Exclude
• Extract
• NonNullable
• ReturnType
• Awaited
• ReadonlyArray
• ThisParameterType
• Template Literal Types
• Uppercase
• Lowercase
• Capitalize
• Uncapitalize
• Parameters

۰۱. تایپ <Partial<Type

تایپ Partial تمام پراپرتی‌ های یک تایپ رو اختیاری میکنه. به مثال زیر توجه کنید:

در مثال بالا با Partial کردن تایپ مورد نظر، در واقع تمام پراپرتی‌ ها optional در نظر گرفته شدن. در واقع Partial مشابه کد زیر عمل میکنه، با این تفاوت که با وجود Partial، دیگه نمیتونیم بصورت دستی پراپرتی های تایپ User رو بصورت اختیاری تعریف کنیم!

۰۲. تایپ <Required<Type

تایپ Required برخلاف Partial عمل میکنه و تمام مقادیر رو اجباری میکنه، حتی اگر پراپرتی ها optional در نظر گرفته شده باشن. مثال:

۰۳. تایپ <Readonly<Type

همونطور که از اسم این تایپ مشخصه، به کمک Readonly میتونیم پراپرتی های یک interface یا یک type رو بصورت Readonly تعریف کنیم. به مثال زیر توجه کنید:

به نکته ی مهمی که در اینجا باید بهش توجه کنیم این هست که فقط برای interface ها و type ها میتونیم از Readonly استفاده کنیم و برای متغیرها قابل استفاده نیست! به عنوان مثال در قطعه کد زیر با وجود اینکه برای تایپ متغیر از Readonly استفاده کردیم، هیچ اتفاقی نمیفته و متغیر firstName همچنان قابل تغییر هست:

همونطور که میدونید برای رفع این مشکل باید برای تعریف متغیر از const استفاده کنیم:

۰۴. تایپ <Record<Keys, Type

تایپ Record یکی از پرکاربردترین Utility Type هاست. به اینصورت که دو تایپ رو به عنوان ورودی دریافت میکنه و اونهارو باهم ترکیب میکنه! به عبارتی اگر بخوایم تایپی داشته باشیم که با اون بتونیم نوع دقیق Key و Value پراپرتی‌ های یک آبجکت‌ رو مشخص کنیم، تایپ Record به کمکمون میاد! این تایپ به عنوان پارامتر اول، تایپ Key ها و به عنوان پارامتر دوم، تایپ Value ها رو دریافت میکنه. برای درک بهتر، به مثال های زیر توجه کنید:

مثال دوم:

۰۵. تایپ <Pick<Type, Keys

با استفاده از تایپ Pick میتونیم یک تایپ شخصی‌ سازی شده جدید بر اساس پراپرتی‌ های دلخواه مون تعریف کنیم. تایپ Pick دو تا ورودی میگیره. ورودی اول تایپ موردنظرمون هست که میخوایم پراپرتی‌ هاش رو انتخاب کنیم و ورودی دوم هم شامل کلید پراپرتی‌ هایی هست که میخوایم توی تایپ جدید حضور داشته باشن. برای درک بهتر به مثال زیر توجه کنید:

توی کد بالا گفتیم که از تایپ User میخوایم یک تایپ جدید با پراپرتی‌ های id و name داشته باشیم.

۰۶. تایپ <Omit<Type, Keys

تایپ Omit هم یکی از پرکاربردترین Utility type هاست. Omit مشابه Pick عمل میکنه، با این تفاوت که برای پارامتر دومش، باید فیلدهایی رو تعریف کنیم که نمیخوایم در تایپ جدید وجود داشته باشن. به مثال زیر توجه کنید:

۰۷. تایپ <Exclude<UnionType, ExcludedMembers

تایپ Exclude دو تا ورودی میگیره. ورودی اولش یک Union Type هست که میخوایم ازش یک تایپ جدید بسازیم و ورودی دومش هم شامل تایپ‌ هایی هست که میخوایم اونهارو از تایپ اول حذف کنیم! در واقع نحوه ی عملکرد Exclude به اینصورته که مقادیر پارامتر دوم که با پارامتر اول یکسان هستن رو حذف میکنه! برای درک بهتر به مثال های زیر توجه کنید:

در قطعه کد بالا ما یک تایپ جدید از AllTypes ساختیم که توی اون Function حذف شده. دقت کنید که ما Boolean رو هم مشخص کردیم، اما چون توی AllTypes مقدار Boolean نداشتیم، نادیده گرفته شده!

مثال دوم:

۰۸. تایپ <Extract<Type, Union

نحوه ی عملکرد Extract به اینصورته که به عنوان پارامتر اول، تایپ موردنظر رو میگیره و به عنوان پارامتر دوم هم تایپی که میخوایم از تایپ اول استخراج کنیم رو دریافت میکنه. مثال:

به لاین ۳ دقت کنید. در این لاین خواستیم a , f رو از تایپ اول بگیریم اما چونکه f در UnionType وجود نداره، فقط a به عنوان تایپ نهایی انتخاب میشه.

۰۹. تایپ <NonNullable<Type

از NonNullable برای حذف مقادیر null و undefined استفاده میکنیم. مثال:

۱۰. تایپ <ReturnType<Type

با استفاده از ReturnType، تایپ خروجی یک تابع رو مشخص میکنیم. مثال:

برای درک بهتر، در مثال زیر حالت‌ های مختلف ReturnType رو میتونید بررسی کنید:

11. تایپ <ReadonlyArray<Type

اگه بخوایم یک آرایه Readonly داشته باشیم (یعنی کاری کنیم که اعضای آرایه ثابت و بدون تغییر باقی بمونن)، میتونیم از این تایپ استفاده کنیم:

همونطور که میبینیم با این کار امکان تغییر اعضای آرایه و حتی اضافه و حذف کردن آیتم ها وجود نداره!

12. تایپ <Awaited<Type

اگر یک تایپ از نوع خروجی یک Promise لازم داشته باشیم، میتونیم از Awaited استفاده کنیم. برای درک بهتر به مثال زیر توجه کنید:

همونطور که میبینیم میتونیم نوع Promise های تو در تو رو هم بدست بیاریم :)

13. تایپ <ThisParameterType<Type

همونطور که میدونیم توی تایپ‌ اسکریپت در حالت عادی نوع this توی یک تابع any هست و اگه بخوایم نوع this رو صراحتاً مشخص کنیم میتونیم از روش زیر استفاده کنیم:

حالا اگه بخوایم یک تایپ از نوع this یک تابع داشته باشیم‌، میتونیم از ThisParameterType استفاده کنیم:

14. تایپ های Template Literal :

تایپ های Template Literal مشابه فرمت template strings در جاوااسکریپت نوشته میشن و این امکان رو به ما میدن که نوع های ترکیبی union ایجاد کنیم! مثال:

برای کمک به ساخت تایپ های template literal، چند نوع utility type کاربردی در تایپ اسکریپت وجود داره که در ادامه باهاشون آشنا میشیم.

15. تایپ <Uppercase<StringType

این تایپ همه کاراکتر های یک رشته رو به حروف بزرگ تبدیل میکنه. مثال:

۱۶. تایپ <Lowerercase<StringType

این تایپ همه کاراکتر های یک رشته رو به حروف کوچیک تبدیل میکنه. مثال:

۱۷. تایپ <Capitalize<StringType

این تایپ اولین حرف یک رشته رو به حرف بزرگ تبدیل میکنه. مثال:

۱۸. تایپ <Uncapitalize<StringType

این تایپ اولین حرف یک رشته رو به حرف کوچیک تبدیل میکنه. مثال:

خوب عزیزان به پایان این مقاله رسیدیم. امیدوارم براتون مفید بوده باشه و استفاده ی لازم رو برده باشین :)

19. تایپ <Parameters<Type

این تایپ به عنوان پارامتر اول تایپی از نوع function دریافت میکنه و تمام پارامترهای اون function رو در قالب یک آرایه برامون برمیگردونه. برای درک بهتر به مثال زیر توجه کنید:

به لاین 5 دقت کنید. تابع ما پارامتر s با تایپ string رو به عنوان ورودی دریافت کرده، پس ما تایپ ["string"] رو خواهیم داشت که در مثال زیر ازش استفاده کردیم:

خوب دوستان به پایان این مقاله رسیدیم. امیدوارم براتون مفید بوده باشه. ممنون میشم اگر نکته ای داشتین در قالب کامنت باهام به اشتراک بزارین تا پست رو ویرایش کنم :) مخلصیم 🌱