همانند مقاله‌ای که درمورد Exclude داشتیم، در این مقاله هم قصد داریم تا مجموعه‌ای از موارد استفاده برای یکی از مفیدترین مفاهیم موجود در تایپ اسکریپت، یعنی Extract را باهم بررسی کنیم.

استخراج یک عضو discriminated union توسط discriminator

با توجه به discriminated union، مانند

Eventزیر، اغلب باید بتوانیم به یک عضو union دسترسی داشته باشیم.

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

ClickEventرا از Eventاستخراج می‌کنیم:

type Event =
  | {
      type: "click";
      x: number;
      y: number;
    }
  | {
      type: "focus";
    }
  | {
      type: "blur";
    };
 
type ClickEvent = Extract<Event, { type: "click" }>;
         
type ClickEvent = {
    type: "click";
    x: number;
    y: number;
}

Eventرا به عنوان آرگومان اول به Extractمی‌دهیم و سپس شکل عضوی را که می‌خواهیم استخراج کنیم به عنوان آرگومان دوم ارسال می‌کنیم. مهم‌تر از همه این است که ما نیازی به انتقال کل عضو به Extractنداریم، فقط شکلی را که می‌خواهیم مطابقت دهیم را ارسال می‌کنیم.

استخراج یک عضو discriminated union توسط shape

گاهی اوقات، می‌خواهیم یک عضو خاص از یک discriminated union را بر اساس شکل آن استخراج کنیم، نه discriminator آن. به تایپ

Eventخود که قبلاً تعریف کردیم برمی‌گردیم:

type Event =
  | {
      type: "mousedown";
      x: number;
      y: number;
    }
  | {
      type: "mouseup";
      x: number;
      y: number;
    }
  | {
      type: "blur";
    };

به جای استخراج یک عضو بر اساس discriminator آن، فرض کنید می‌خواهیم عضوی را استخراج کنیم که دارای ویژگی

xاز تایپ numberاست. می‌توانیم { x: number }را به‌عنوان شکلی برای مطابقت ارائه کنیم:

type ClickEvent = Extract<Event, { x: number }>;
         
type ClickEvent = {
    type: "mousedown";
    x: number;
    y: number;
} | {
    type: "mouseup";
    x: number;
    y: number;
}

نتیجه تایپ

ClickEventاست، که عضوی از Eventunion می‌باشد و ویژگی xاز تایپ numberرا دارد. در این حالت، از آنجایی که هر دو عضو mousedownو mouseupدارای ویژگی xهستند، تایپ ClickEventترکیبی از این دو عضو خواهد بود.

استخراج همه strings/booleans/numbers از یک union

یک تایپ union را در نظر می‌گیریم که شامل ترکیبی از stringها، booleanها و numberها است:

type PossibleValues =
  | "admin"
  | "user"
  | "guest"
  | true
  | false
  | ۱
  | ۲
  | ۳;

برای استخراج تمام اعضای string از این union، می‌توانیم از

Extract<PossibleValues, string>استفاده کنیم:

type Strings = Extract<PossibleValues, string>;
       
type Strings = "admin" | "user" | "guest"

نتیجه، تایپ

Stringsخواهد بود که unionای از همه اعضای string (“admin”، “user” و “guest”) در PossibleValuesunion است.

استخراج تمام توابع از یک union

یک تایپ union را در نظر می‌گیریم که شامل ترکیبی از stringها، booleanها، numberها و توابع است:

type PossibleValues =
  | string
  | number
  | boolean
  | (() => void);

برای استخراج همه اعضای تابع از این union، می‌توانیم از

Extract<PossibleValues, (...args: any[]) => any>استفاده کنیم:

type Functions = Extract<
        
type Functions = () => void
  PossibleValues,
  (...args: any[]) => any
>;

(...args: any[]) => anyبه طور موثر با هر نوع تابع مطابقت دارد، بنابراین ما می‌توانیم از آن برای استخراج همه اعضای تابع از union استفاده کنیم.

در این حالت، تایپ

Functionsفقط شامل تایپ تابع () => voidخواهد بود.

حذف null و undefined از یک union

مواقعی وجود دارد که می‌خواهیم تایپ‌های خاصی را از یک union حذف کنیم. ممکن است یک تایپ union داشته باشیم که شامل

nullو undefinedباشد، اما بخواهیم تایپ جدیدی ایجاد کنیم که آن مقادیر را حذف کند.

type PossibleValues =
  | string
  | number
  | boolean
  | null
  | undefined;

برای حذف

nullو undefinedاز PossibleValues، می‌توانیم از Extract<PossibleValues, {}>استفاده کنیم.

type NotNull = Extract<PossibleValues, {}>;
       
type NotNull = string | number | boolean

می‌توانیم از

{}به‌عنوان آرگومان دوم برای Extractبرای مطابقت با تایپ‌های EXCEPT برای nullو undefinedاستفاده کنیم. در این مقاله به شکل کامل تایپ empty object در تایپ اسکریپت را مورد بررسی قرار داده‌ایم.

یافتن اعضای مشترک بین دو union

در مثال زیر، ما دو نوع union داریم،

EnglishSpeakingCountriesو CountriesInWesternHemisphere:

type EnglishSpeakingCountries = "UK" | "USA" | "Canada";
type CountriesInWesternHemisphere =
  | "USA"
  | "Canada"
  | "Mexico";

برای یافتن کشورهای مشترک بین این دو union، می‌توانیم از تایپ

Extractutility به صورت زیر استفاده کنیم:

type CommonCountries = Extract<
           
type CommonCountries = "USA" | "Canada"
  EnglishSpeakingCountries,
  CountriesInWesternHemisphere
>;

تایپ

CommonCountriesحاصل فقط شامل اعضایی خواهد بود که در هر دو union حضور دارند. در این مثال، کشور مشترک “USA” است که در هر دو union وجود دارد.