💎 استخراج نوع آیتم از یک آرایه در Typescript 💎

فرض کنید، یک DataType مشخص دارید (مثلاً از یک API) و دیتای شما به شکل آرایه‌ای از آبجکت‌ها هست و میخواید فقط تایپ آیتم‌های این آرایه رو استخراج کنید بدون اینکه تایپ آیتم از قبل به صورت جدا تعریف شده باشه، توی این پست قراره با یه مثال ساده به حل کردن این مسئله بپردازیم ✅

کد اولیه ما به این شکله 🔻

type GetAllUsersResponse = {
  getAllUsers: Array<{
    id: number;
    name: string;
    email: string;
  }>;
};

const response: GetAllUsersResponse = {
  getAllUsers: [ ... ],
};

حالا برای استخراج نوع آیتم های آرایه getAllUsers، میتونیم از [number] استفاده کنیم 🔻

type UserItem = GetAllUsersResponse['getAllUsers'][number];

وقتی که [number] جلوی یک تایپ آرایه قرار میگیره، به typescript میگه که فقط نوع آیتم آرایه رو میخوام ✅

📊 جمع بندی

حالا شاید پیش خودتون بگید که چرا باید از این روش استفاده بکنم ؟ چرا اصلا نیام و به صورت جدا تعریف بکنم تایپ User رو ؟ 🤔

درواقع این چالش بیشتر توی مواردی به وجود میاد که DataType شما مشخصه از قبل، مثل وقتی که از Graphql Codegen توی پروژتون استفاده میکنید، Codegen درواقع کارش اینه که Schema GraphQL رو به صورت اتومات به typescript تبدیل کنه تا دیگه مجبور نباشید تایپ ریسپانس API رو خودتون تعریف کنید.

یکی دیگه از دلایلی که عاشق گرف‌کیو‌الم :)

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #typescript #tricks

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

💎 بررسی Utility Type‌ها در TypeScript 💎

بعضی وقت ها تو تایپ‌اسکریپت, نوع خاصی از type یا interface موجود نیازمون میشه، مثل optional یا required کردن تمامی پورپرتی های تایپ، یه همچین مواردی رو میتونیم خیلی ساده با Utility Type‌ها به شکل مد‌نظرخون تغییر بدیم، تقریبا میشه گفت یک instance با تغییرات و شرطهایی ازشون بسازیم....

#typescript

✅ کاربردی ترین Utility Type‌ها

➊ Partial<Type>

تمام ویژگی‌های یک تایپ رو اختیاری می‌کنه.

type User = { id: number; name: string };
type PartialUser = Partial<User>; // { id?: number; name?: string }

➋ Required<Type>

تمامی پروپرتی‌های یک تایپ رو اجباری می‌کنه.

type User = { id?: number; name?: string };
type RequiredUser = Required<User>; // { id: number; name: string }

➌ Readonly<Type>

تمام پروپرتی‌های تایپ رو ReadOnly می‌کنه.

type User = { id: number; name: string };
type ReadonlyUser = Readonly<User>; // { readonly id: number; readonly name: string }

یعنی اگر بعد از تعریف آبجکت بخواید مقدار یکی از پروپرتی‌های اون آبجکت رو تغییر بدید بهتون ارور میده.

➍ Pick<Type, Keys>

این یکی واقعا کاربردیه و کارش اینه که فقط ویژگی‌های مشخص‌شده از یک تایپ رو برگردونه.

type User = { id: number; name: string; email: string };
type PickedUser = Pick<User, 'id' | 'name'>; // { id: number; name: string }

به Pick باید دو تا مقدار پاس بدید، اول تایپ مد نظرتون و دوم لیست پراپرتی‌ها که می‌خواهید از نوع اولیه انتخاب کنید به این شکل : 'id' | 'name'

➎ Omit<Type, Keys>

ویژگی‌های مشخص‌شده رو از یک تایپ حذف می‌کنه.

type User = { id: number; name: string; email: string };
type OmittedUser = Omit<User, 'email'>; // { id: number; name: string }

این یکی نحوه کارکردش مثل Pick هستش فقط به جای اینکه لیستی که بهش میدید رو ففط برگردونه میاد و فاکتور میگیره از تایپ حذف می‌کنه.

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

🚀 @CoolyCode