https://virgool.io/feed/@Reza.mirzapour توسعه دهنده وب fa 2026-06-08 01:00:54 https://files.virgool.io/upload/users/58266/avatar/tb1sPu.jpg?height=120&width=120 https://virgool.io/@Reza.mirzapour https://virgool.io/@Reza.mirzapour/%D9%86%D9%88%D8%B4%D8%AA%D9%86-%DA%86%D9%86%D8%AF-utility-type-%D9%BE%D8%B1%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D8%AF%D8%B1-typescript-thwqdmzbgmwu سلام دوستان امیدوارم حالتون خوب باشه. این اولین مقاله من تو ویرگوله که درباره نوشتن یوتیلیتی تایپ های کاستوم در تایپ اسکریپته. اولین مقاله رو با تایپ اسکریپت شروع کردم چون این روزا طرفدارای زیادی تو سراسر دنیا پیدا کرده ولی مطلب فارسی در موردش خیلی کمه و یه جورایی داره در حقش احجاف میشه. خب حرفای حاشیه ای بسه بریم یه مقدمه کوچیک و بعدش هم مطلب اصلی.تایپ اسکریپت بطور built-in دارای تعدادی utility type پابه ای هستش و پیاده سازی سایر یوتیلیتی تایپ های کاستوم رو به عهده برنامه نویس ها گذاشته. ما هم قراره تو این مطلب چند تا یوتیلیتی تایپ سفارشی پرکاربرد رو پیاده سازی کنیم ولی پیش نیازش دونستن جنریک ها و چند یوتیلیتی تایپ built-in مثل Required, Partial, Pick و Omit هستش که قبل از شروع مختصر درباره شون توضیح میدم.فلسفه و منطق به وجود اومدن جنریک ها نوشتن تابپ های resusable بوده، به این صورت که یک تایپ بتونه بعنوان ورودی یک یا چند تایپ دیگه رو بگیره و تایپ جدیدی رو بهمون برگردونه. تو مثال زیر اینترفیس ServerResponse بعنوان ورودی تایپ T رو میگیره و نوع پراپرتی data رو برابر با آرایه ای از T ها قرار میده.interface ServerResponse<T> { message: string; hasError: boolean; data: T[] }حالا که با مفهوم جنریک آشنا شدیم کمی با یوتیلیتی تایپ های built-inیی که بالا بهشون اشاره کردیم آشنا میشیم1. Required<T>به عنوان ورودی یک تایپ رو میگیره و پراپرتی های اون رو به حالت اجباری در میاره. در کد زیر RequiredUserType و RequiredUserInterface با هم معادلندtype RequiredUserType = Required<UserInterface> interface RequiredUserInterface { email: string; firstName: string; lastName: string; age: number; phone: string; address: string }2. Partial<T>تایپ T رو میگیره و پراپرتی های موجود اون رو به حالت Optional درمیاره. در کد زیر PartialUserType و PartialUserInterface با هم معادلند.type PartialUserType = Partial<UserInterface> interface PartialUserInterface { email?: string; firstName?: string; lastName?: string; age?: number; phone?: string; address?: string }3. Pick<T, P extends keyof T>به عنوان ورودی تایپ و unionی از پراپرتی های موجود در اون تایپ رو میگیره و تایپ خروجی، تایپیه که شامل اون پراپرتی هایه. در کد زیر PickUserType و PickUserInterface با هم معادلند.type PickUserType = Pick<UserInterface, 'email' | 'phone'> interface PickUserInterface { email: string; phone?: string; }4. Omit<T, P extends keyof T>به عنوان ورودی تایپ و unionی از پراپرتی های موجود در اون تایپ رو میگیره و تایپ خروجی، تایپیه که شامل اون پراپرتی نباشه. در کد زیرOmitUserType و UserInterface باهم معادلند.type OmitUserType = Omit<UserInterface, 'firstName' | 'lastName'> interface OmitUserInterface { email: string; age: number; phone?: string; address?: string }تفاوت RequiredUserType و UserInterface در این هست که پراپرتی های اون به حالت اجباری در اومدهتفاوت PartialUserType و UserInterface در این هست که پراپرتی های اون به حالت اختیاری در اومدهتفاوت PickUserType و UserInterface در این هست که فقط شامل email و phone هستتفاوت OmitUserType و UserInterface در این هست که شامل پراپرتی های firstName و lastName نیستخب حالا بریم سر اصل مطلبهمونطور که میبنید در UserInterface پراپرتی های lastName و phone و address اختیاری و email و firstName و age اجباری هستند. حالا چند تا نیازمندی مطرح می‌کنم و میریم ببینیم چجوری می‌شه بهشون پاسخ داد.نبازمندی ۱: تایپی داشته باشیم که فقط پراپرتی های email و lastName اجباری و بقیه اختیاری باشهنبازمندی ۲: تایپی داشته باشیم که فقط پراپرتی های lastName و age اختیاری و بقیه اجباری باشهنیازمندی ۳: تایپی داشته باشیم که علاوه بر پراپرتی هایی که هم اکنون اختیاری هستند (lastName و phone و address )، پراپرتی age هم اختیاری بشه و بقیه بدون تغییرنیازمندی ۴: تایپی داشته باشیم که علاوه بر پراپرتی هایی که هم اکنون اجباری هستند (email و firstName و age )، پراپرتی phone هم اجباری بشه و بقیه بدون تغییرپاسخ نیازمندی ۱type SomeRequired<T, P extends keyof T> = Required<Pick<T, P>> & Partial<Omit<T, P>> type Ans1 = SomeRequired<UserInterface, 'email' | 'lastName'>به عنوان ورودی تایپ T و یونیونی از پراپرتی هاش گرفته می شه، در سمت چپ اپراتور & پراپرتی های پاس داده شده از تایپ T انتخاب شده و به حالت Required درمیان. در سمت راست & پراپرتی های پاس داده شده از تایپ T حذف شده و بقیه پراپرتی ها به حالت Partial در میان. این ۲ تایپ با هم combine میشوند (عملگر &) و تایپ مورد نظر ما بوجود میاد مراحلی که قدم به قدم اتفاق میفته:Required<Pick<UserInterface, 'email' | 'lastName'>> & Partial<Omit<UserInterface, 'email' | 'lastName'>> // => Required<{email: string; lastName?: string}> & Partial<{firstName: string; age: number; phone?: string; address?: string}> // => { email: string; lastName: string } & { firstName?: string; age?: number; phone?: string; address?: string } // => { email: string; lastName: string firstName?: string; age?: number; phone?: string; address?: string }پاسخ نیازمندی ۲type SomePartial<T, P extends keyof T> = Required<Omit<T, P>> & Partial<Pick<T, P>> type Ans2 = SomePartial<UserInterface, 'lastName' | 'age'>به عنوان ورودی تایپ T و یونیونی از پراپرتی هاش گرفته می شه، در سمت چپ اپراتور & پراپرتی های پاس داده شده از تایپ T حذف شده و به حالت Required درمیان. در سمت راست & پراپرتی های پاس داده شده از تایپ T انتخاب شده و به حالت Partial در میان. این ۲ تایپ با هم combine میشن (عملگر &) و تایپ مورد نظر ما بوجود میاد.مراحلی که اتفاق میفته:Required<Omit<UserInterface, 'lastName' | 'age'>> & Partial<Pick<UserInterface, 'lastName' | 'age'>> // => Required<{email: string; firstName: string; phone?: string; address?: string}> & Partial<{lastName: string; age: number;}> // => { email: string; firstName: string; phone: string; address: string } & { lastName?: string; age?: number; } // => { email: string; firstName: string; lastName?: string age?: number; phone: string; address: string }پاسخ نیازمندی ۳type AddPartial<T, P extends keyof T> = Omit<T, P> & Partial<Pick<T, P>> type Ans3 = AddPartial<UserInterface, 'age'>به عنوان ورودی تایپ T و یونیونی از پراپرتی هاش گرفته می شه، در سمت چپ اپراتور & پراپرتی های پاس داده شده از تایپ T حذف میشن. در سمت راست & پراپرتی های پاس داده شده از تایپ T انتخاب شده و به حالت Partial در میان. این ۲ تایپ با هم combine میشن (عملگر &) و تایپ مورد نظر ما بوجود میاد.مراحلی که اتفاق میفته:Omit<UserInterface, 'age'> & Partial<Pick<UserInterface, 'age'>> // => { email: string; firstName: string; lastName?: string; phone?: string; address?: string} & Partial<{age: number}> // => { email: string; firstName: string; lastName?: string; phone?: string; address?: string } & { age?: number; } // => { email: string; firstName: string; lastName?: string age?: number; phone?: string; address?: string }پاسخ نیازمندی ۴type AddRequired<T, P extends keyof T> = Omit<T, P> & Required<Pick<T, P>> type Ans4 = AddRequired<UserInterface, 'phone'>به عنوان ورودی تایپ T و یونیونی از پراپرتی هاش گرفته می شه، در سمت چپ اپراتور & پراپرتی های پاس داده شده از تایپ T حذف میشن. در سمت راست & پراپرتی های پاس داده شده از تایپ T انتخاب شده و به حالت Required در میان. این ۲ تایپ با هم combine میشن (عملگر &) و تایپ مورد نظر ما بوجود میاد.مراحلی که اتفاق میفته:Omit<UserInterface, 'phone'> & Required<Pick<UserInterface, 'phone'>> // => { email: string; firstName: string; lastName?: string; age: number; address?: string} & Required<{phone?: number}> // => { email: string; firstName: string; lastName?: string; age: number; address?: string} & {phone: number} // => { email: string; firstName: string; lastName?: string; age: number; phone: string; address?: string }امیدوارم خیلی بد توضیح نداده باشم که هیچکی هیچی نفهمه :)اگه خطایی تو این محتوا دیدین خوشحال میشم که تو کامنت ها بهم تذکر بدین. خیلی ممنون از وقتی که برای مطالعه گذاشتید. رضا میرزاپور رضا میرزاپور Fri, 07 Jan 2022 00:55:25 +0330