آشنایی با Utility Type های پرکاربرد تایپ‌اسکریپت - قسمت اول

سلام دوستان 🖐️
همونطور که می‌دونیم تایپ‌اسکریپت علاوه‌ بر اینکه اجازه میده که تایپ‌های مد نظر خودمون رو بسازیم، چند تایپ کاربردی رو ارائه میده که با اونها می‌تونیم تایپ‌های موجود رو دستکاری و به یک حالت دیگه تبدیلشون کنیم. به این تایپ‌ها که بصورت گلوبال در دسترس هستن می‌گیم Utility Types که توی این دو قسمت می‌خوایم با اونها آشنا بشیم.

 

۱. تایپ Partial<Type>

فرض کنیم یک تایپ داریم به صورت زیر:

type Post = {
  title: string;
  status: string;
}

در حالت معمولی اگه بخوایم یک آبجکت از نوع این تایپ بسازیم، باید همهٔ پراپرتی‌های این تایپ رو پیاده‌سازی کنیم:

const newPost: Post = {
  title: 'Hello world!'
}

// Error: Property 'status' is missing
//        in type '{ title: string; }'
//        but required in type 'Post'

اما با Partial می‌تونیم پیاده‌سازی این پراپرتی‌ها رو برای آبجکتمون اختیاری کنیم. در واقع Partial یک تایپ رو می‌گیره و یک تایپ جدید بهمون برمی‌گردونه که همهٔ پراپرتی‌های اون اختیاری هستن:

type Post = {
  title: string;
  status: string;
}

type PartialPost = <<Partial>><Post>;

const post1: PartialPost = { title: 'Hello' };
const post2: PartialPost = { status: 'Draft' };
const post3: PartialPost = { };

برای اجرای این کد اینجا رو ببینید.

 

۲. تایپ Required<Type>

این تایپ دقیقاً برعکس تایپ Partial هست. اگه یک تایپ داشته باشیم که بعضی از پراپرتی‌های اون اختیاری باشن، با Required می‌تونیم یک تایپ جدید بسازیم که همهٔ پراپرتی‌های اون اجباری هستن:

type Post = {
  title?: string;
  status?: string;
}

type RequiredPost = <<Required>><Post>;

const post: RequiredPost = { 
  title: 'Hello'
};

// Error: Property 'status' is missing
//        in type '{ title: string; }'
//        but required in type 'Required<Post>'

برای اجرای این کد اینجا رو ببینید.

 

۳. تایپ Readonly<Type>

با کمک Readonly می‌تونیم از یک تایپ موجود یک تایپ جدید بسازیم که همهٔ پراپرتی‌های اون Readonly هستن. یعنی اگه آبجکتی این تایپ رو پیاده‌سازی کنه، پراپرتی‌های اون دیگه قابل تغییر نیستن:

type Post = {
  title: string;
}

type ReadonlyPost = Readonly<Post>;

const post1: ReadonlyPost = {
  title: 'Hello World',
}

post1.title = 'Goodbye World';
// Error: Cannot assign to 'title' because it is a read-only property.

برای اجرای این کد اینجا رو ببینید.

 

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

اگه می‌خوایم تایپی داشته باشیم که با اون بتونیم نوع دقیق اسم و مقدار پراپرتی‌های آبجکت‌هامون رو مشخص کنیم، تایپ Record به کمکمون میاد:

type Names = 'John' | 'Mario' | 'Emily';
type PersonInfo = { age: number, hobbies: string };

type Persons = <<Record<Names, PersonInfo>;>>

const persons: Persons = {
  'Emily': { age: 4, hobbies: 'Sleep' },
  'John':  { age: 5, hobbies: 'Video Games' },
  'Mario': { age: 3, hobbies: 'Space' },
};

برای اجرای این کد اینجا رو ببینید. سعی کنید پراپرتی‌ها رو کم و زیاد و یا اسمشون رو عوض کنین.

 

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

اگه یک تایپ داریم و می‌خوایم از اون، یک تایپ جدید که شامل فقط پراپرتی‌های دلخواه ما باشه داشته باشیم، می‌تونیم از Pick استفاده کنیم:

type Person = {
  name: string;
  age: number;
  hobbies: string;
  status: string;
  created_at: string;
}

type MiniPerson = Pick<Person, "name" | "age">;

const john: MiniPerson = {
    name: 'John',
    age: 4,
}

تایپ Pick دو تا ورودی می‌گیره. ورودی اول تایپ مد نظرمون هست که می‌خوایم پراپرتی‌های اون رو انتخاب کنیم. توی ورودی دوم باید اسم پراپرتی‌هایی رو بنویسیم که می‌خوایم توی تایپ جدید حضور داشته باشه. توی کد بالا گفتیم از تایپ Person می‌خوایم یک تایپ جدید که شامل پراپرتی‌های name و age هست داشته باشیم.

برای اجرای این کد اینجا رو ببینید.

 

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

اگه از یک تایپ موجود بعضی از پراپرتی‌های اون رو احتیاج نداریم، می‌تونیم از تایپ Omit استفاده کنیم:

type Person = {
  name: string;
  age: number;
  hobbies: string;
  status: string;
  created_at: string;
}

type MiniPerson = <<Omit<Person, "created_at" | "status">;>>

const john: MiniPerson = {
    name: 'John',
    age: 4,
    hobbies: 'Nothing',
};

توی کد بالا، یک تایپ جدید از Person ساختیم که توی اون دو پراپرتی created_at و status حذف شدن. برای اجرای این کد اینجا رو ببینید.

 

۷. تایپ Exclude<UnionType, ToExcludeMembers>

اگه یک Union Type داریم و می‌خوایم بعضی از اعضای اون رو حذف کنیم می‌تونیم از Exclude استفاده کنیم:

type AllTypes = string | number | Function;

type NoFunc = Exclude<AllTypes, <<Function | Boolean>>>;
            // string | number

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

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

 

۸. تایپ NonNullable<Type>

NonNullable یک تایپ جدید بهمون برمی‌گردونه که توی اون اعضای null و undefined حذف شدن:

type T1 = string | null | undefined | number;

type T2 = NonNullable<T1>;
        // string | number

برای اجرای این کد اینجا رو ببینید.

 

۹. تایپ Parameters<Type>

اگه تابعی داریم و می‌خوایم یک تایپ از نوع پارامترهای اون تابع داشته باشیم، Parameters به کمکمون میاد. این تایپ یک ورودی می‌گیره که باید یک تابع باشه و یک Tuple برمی‌گردونه که شامل نوع‌های پارامتر تابع مد نظرمون هست:   

function myFunc(a: string, b: number) {}

type FuncParams = Parameters<typeof myFunc>; // [string, number]

const params: FuncParams = ["Hello", 3];

برای اجرای این کد اینجا رو ببینید.

 

۱۰. نوع ReturnType<Type>

این تایپ برای ساختن یک تایپ جدید از نوع خروجی یک تابع استفاده میشه:

const func1 = (): number => 2;
const func2 = (): [number, number] => [1, 2];

type T1 = ReturnType<typeof func1>; // number
type T2 = ReturnType<typeof func2>; // [number, number]

برای اجرای این کد اینجا رو ببینید.

خب دوستان این بود از قسمت اول این آموزش. قسمت بعدی رو می‌تونین از لینک زیر ببینین. روزتون خوش ✌️🌹