M

MLOG

עברית

התמקצעו בטיפוסי שירות של TypeScript: כלים רבי עוצמה לשינוי טיפוסים, שיפור שימוש חוזר בקוד והגברת בטיחות הטיפוסים באפליקציות שלכם.

טיפוסי שירות (Utility Types) ב-TypeScript: כלים מובנים למניפולציה של טיפוסים

TypeScript היא שפה רבת עוצמה המוסיפה טיפוסים סטטיים ל-JavaScript. אחד המאפיינים המרכזיים שלה הוא היכולת לבצע מניפולציות על טיפוסים, המאפשרת למפתחים ליצור קוד חזק וקל יותר לתחזוקה. TypeScript מספקת סט של טיפוסי שירות מובנים המפשטים טרנספורמציות נפוצות של טיפוסים. טיפוסי שירות אלה הם כלים יקרי ערך להגברת בטיחות הטיפוסים, שיפור יכולת השימוש החוזר בקוד וייעול זרימת העבודה בפיתוח. מדריך מקיף זה סוקר את טיפוסי השירות החיוניים ביותר ב-TypeScript, ומספק דוגמאות מעשיות ותובנות יישומיות שיעזרו לכם לשלוט בהם.

מהם טיפוסי שירות (Utility Types) ב-TypeScript?

טיפוסי שירות הם אופרטורי טיפוסים מוגדרים מראש שהופכים טיפוסים קיימים לטיפוסים חדשים. הם מובנים בשפת TypeScript ומספקים דרך תמציתית והצהרתית לבצע מניפולציות נפוצות של טיפוסים. שימוש בטיפוסי שירות יכול להפחית באופן משמעותי קוד חוזרני (boilerplate) ולהפוך את הגדרות הטיפוסים שלכם ליותר אקספרסיביות וקלות להבנה.

חשבו עליהם כפונקציות הפועלות על טיפוסים במקום על ערכים. הם מקבלים טיפוס כקלט ומחזירים טיפוס שעבר שינוי כפלט. זה מאפשר לכם ליצור יחסים וטרנספורמציות מורכבות של טיפוסים עם מינימום קוד.

מדוע להשתמש בטיפוסי שירות?

ישנן מספר סיבות משכנעות לשלב טיפוסי שירות בפרויקטי ה-TypeScript שלכם:

טיפוסי שירות חיוניים ב-TypeScript

בואו נסקור כמה מטיפוסי השירות הנפוצים והמועילים ביותר ב-TypeScript. נכסה את מטרתם, התחביר שלהם ונספק דוגמאות מעשיות כדי להמחיש את השימוש בהם.

1. Partial<T>

טיפוס השירות Partial<T> הופך את כל המאפיינים של טיפוס T לאופציונליים. זה שימושי כאשר רוצים ליצור טיפוס חדש שיש לו חלק מהמאפיינים של טיפוס קיים או את כולם, אך לא רוצים לדרוש שכולם יהיו נוכחים.

תחביר:

type Partial<T> = { [P in keyof T]?: T[P]; };

דוגמה:

interface User {
 id: number;
 name: string;
 email: string;
}

type OptionalUser = Partial<User>; // כל המאפיינים הם כעת אופציונליים

const partialUser: OptionalUser = {
 name: "Alice", // מספקים רק את המאפיין name
};

מקרה שימוש: עדכון אובייקט עם מאפיינים מסוימים בלבד. לדוגמה, דמיינו טופס עדכון פרופיל משתמש. אינכם רוצים לדרוש מהמשתמשים לעדכן כל שדה בבת אחת.

2. Required<T>

טיפוס השירות Required<T> הופך את כל המאפיינים של טיפוס T לנדרשים. זהו ההפך מ-Partial<T>. זה שימושי כאשר יש לכם טיפוס עם מאפיינים אופציונליים, ואתם רוצים להבטיח שכל המאפיינים נוכחים.

תחביר:

type Required<T> = { [P in keyof T]-?: T[P]; };

דוגמה:

interface Config {
 apiKey?: string;
 apiUrl?: string;
}

type CompleteConfig = Required<Config>; // כל המאפיינים הם כעת נדרשים

const config: CompleteConfig = {
 apiKey: "your-api-key",
 apiUrl: "https://example.com/api",
};

מקרה שימוש: אכיפה שכל הגדרות התצורה סופקו לפני הפעלת האפליקציה. זה יכול לעזור למנוע שגיאות זמן ריצה הנגרמות על ידי הגדרות חסרות או לא מוגדרות.

3. Readonly<T>

טיפוס השירות Readonly<T> הופך את כל המאפיינים של טיפוס T לקריאה-בלבד (readonly). זה מונע מכם לשנות בטעות את המאפיינים של אובייקט לאחר שנוצר. זה מקדם אי-שינוי (immutability) ומשפר את החזאות של הקוד שלכם.

תחביר:

type Readonly<T> = { readonly [P in keyof T]: T[P]; };

דוגמה:

interface Product {
 id: number;
 name: string;
 price: number;
}

type ImmutableProduct = Readonly<Product>; // כל המאפיינים הם כעת לקריאה בלבד

const product: ImmutableProduct = {
 id: 123,
 name: "Example Product",
 price: 25.99,
};

// product.price = 29.99; // שגיאה: לא ניתן להקצות ערך ל-'price' מכיוון שהוא מאפיין לקריאה בלבד.

מקרה שימוש: יצירת מבני נתונים בלתי ניתנים לשינוי (immutable), כגון אובייקטי תצורה או אובייקטי העברת נתונים (DTOs), שאסור לשנות לאחר יצירתם. זה שימושי במיוחד בפרדיגמות תכנות פונקציונליות.

4. Pick<T, K extends keyof T>

טיפוס השירות Pick<T, K extends keyof T> יוצר טיפוס חדש על ידי בחירת קבוצת מאפיינים K מתוך טיפוס T. זה שימושי כאשר אתם צריכים רק תת-קבוצה של המאפיינים של טיפוס קיים.

תחביר:

type Pick<T, K extends keyof T> = { [P in K]: T[P]; };

דוגמה:

interface Employee {
 id: number;
 name: string;
 department: string;
salary: number;
}

type EmployeeNameAndDepartment = Pick<Employee, "name" | "department">; // בחירה רק של name ו-department

const employeeInfo: EmployeeNameAndDepartment = {
 name: "Bob",
 department: "Engineering",
};

מקרה שימוש: יצירת אובייקטי העברת נתונים (DTOs) מיוחדים המכילים רק את הנתונים הנחוצים לפעולה מסוימת. זה יכול לשפר ביצועים ולהפחית את כמות הנתונים המועברת ברשת. דמיינו שליחת פרטי משתמש לקליינט אך השמטת מידע רגיש כמו משכורת. תוכלו להשתמש ב-Pick כדי לשלוח רק את id ו-name.

5. Omit<T, K extends keyof any>

טיפוס השירות Omit<T, K extends keyof any> יוצר טיפוס חדש על ידי השמטת קבוצת מאפיינים K מטיפוס T. זהו ההפך מ-Pick<T, K extends keyof T> ושימושי כאשר רוצים להחריג מאפיינים מסוימים מטיפוס קיים.

תחביר:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

דוגמה:

interface Event {
 id: number;
 title: string;
description: string;
 date: Date;
 location: string;
}

type EventSummary = Omit<Event, "description" | "location">; // השמטת description ו-location

const eventPreview: EventSummary = {
 id: 1,
 title: "Conference",
 date: new Date(),
};

מקרה שימוש: יצירת גרסאות פשוטות יותר של מודלי נתונים למטרות ספציפיות, כמו הצגת סיכום של אירוע מבלי לכלול את התיאור המלא והמיקום. ניתן להשתמש בזה גם להסרת שדות רגישים לפני שליחת נתונים לקליינט.

6. Exclude<T, U>

טיפוס השירות Exclude<T, U> יוצר טיפוס חדש על ידי החרגה מ-T של כל הטיפוסים שניתן להקצות ל-U. זה שימושי כאשר רוצים להסיר טיפוסים מסוימים מטיפוס איחוד (union type).

תחביר:

type Exclude<T, U> = T extends U ? never : T;

דוגמה:

type AllowedFileTypes = "image" | "video" | "audio" | "document";
type MediaFileTypes = "image" | "video" | "audio";

type DocumentFileTypes = Exclude<AllowedFileTypes, MediaFileTypes>; // "document"

const fileType: DocumentFileTypes = "document";

מקרה שימוש: סינון טיפוס איחוד כדי להסיר טיפוסים ספציפיים שאינם רלוונטיים בהקשר מסוים. לדוגמה, ייתכן שתרצו להחריג סוגי קבצים מסוימים מרשימת סוגי קבצים מותרים.

7. Extract<T, U>

טיפוס השירות Extract<T, U> יוצר טיפוס חדש על ידי חילוץ מ-T של כל הטיפוסים שניתן להקצות ל-U. זהו ההפך מ-Exclude<T, U> ושימושי כאשר רוצים לבחור טיפוסים ספציפיים מתוך טיפוס איחוד.

תחביר:

type Extract<T, U> = T extends U ? T : never;

דוגמה:

type InputTypes = string | number | boolean | null | undefined;
type PrimitiveTypes = string | number | boolean;

type NonNullablePrimitives = Extract<InputTypes, PrimitiveTypes>; // string | number | boolean

const value: NonNullablePrimitives = "hello";

מקרה שימוש: בחירת טיפוסים ספציפיים מתוך טיפוס איחוד על בסיס קריטריונים מסוימים. לדוגמה, ייתכן שתרצו לחלץ את כל הטיפוסים הפרימיטיביים מטיפוס איחוד הכולל גם טיפוסים פרימיטיביים וגם טיפוסי אובייקט.

8. NonNullable<T>

טיפוס השירות NonNullable<T> יוצר טיפוס חדש על ידי החרגת null ו-undefined מטיפוס T. זה שימושי כאשר רוצים להבטיח שטיפוס לא יכול להיות null או undefined.

תחביר:

type NonNullable<T> = T extends null | undefined ? never : T;

דוגמה:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>; // string

const message: DefinitelyString = "Hello, world!";

מקרה שימוש: אכיפה שערך אינו null או undefined לפני ביצוע פעולה עליו. זה יכול לעזור למנוע שגיאות זמן ריצה הנגרמות על ידי ערכי null או undefined לא צפויים. חשבו על תרחיש שבו אתם צריכים לעבד כתובת של משתמש, וזה קריטי שהכתובת לא תהיה null לפני כל פעולה.

9. ReturnType<T extends (...args: any) => any>

טיפוס השירות ReturnType<T extends (...args: any) => any> מחלץ את טיפוס ההחזרה של טיפוס פונקציה T. זה שימושי כאשר רוצים לדעת את הטיפוס של הערך שפונקציה מחזירה.

תחביר:

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

דוגמה:

function fetchData(url: string): Promise<{ data: any }> {
 return fetch(url).then(response => response.json());
}

type FetchDataReturnType = ReturnType<typeof fetchData>; // Promise<{ data: any }>

async function processData(data: FetchDataReturnType) {
 // ...
}

מקרה שימוש: קביעת הטיפוס של הערך המוחזר על ידי פונקציה, במיוחד כאשר מתמודדים עם פעולות אסינכרוניות או חתימות פונקציה מורכבות. זה מאפשר לכם להבטיח שאתם מטפלים בערך המוחזר כראוי.

10. Parameters<T extends (...args: any) => any>

טיפוס השירות Parameters<T extends (...args: any) => any> מחלץ את טיפוסי הפרמטרים של טיפוס פונקציה T כ-tuple. זה שימושי כאשר רוצים לדעת את הטיפוסים של הארגומנטים שפונקציה מקבלת.

תחביר:

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

דוגמה:

function createUser(name: string, age: number, email: string): void {
 // ...
}

type CreateUserParams = Parameters<typeof createUser>; // [string, number, string]

function logUser(...args: CreateUserParams) {
 console.log("Creating user with:", args);
}

מקרה שימוש: קביעת הטיפוסים של הארגומנטים שפונקציה מקבלת, מה שיכול להיות שימושי ליצירת פונקציות גנריות או דקורטורים שצריכים לעבוד עם פונקציות בעלות חתימות שונות. זה עוזר להבטיח בטיחות טיפוסים בעת העברת ארגומנטים לפונקציה באופן דינמי.

11. ConstructorParameters<T extends abstract new (...args: any) => any>

טיפוס השירות ConstructorParameters<T extends abstract new (...args: any) => any> מחלץ את טיפוסי הפרמטרים של טיפוס פונקציית בנאי (constructor) T כ-tuple. זה שימושי כאשר רוצים לדעת את הטיפוסים של הארגומנטים שבנאי מקבל.

תחביר:

type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;

דוגמה:

class Logger {
 constructor(public prefix: string, public enabled: boolean) {}
 log(message: string) {
 if (this.enabled) {
 console.log(`${this.prefix}: ${message}`);
 }
 }
}

type LoggerConstructorParams = ConstructorParameters<typeof Logger>; // [string, boolean]

function createLogger(...args: LoggerConstructorParams) {
 return new Logger(...args);
}

מקרה שימוש: בדומה ל-Parameters, אך באופן ספציפי עבור פונקציות בנאי. זה עוזר בעת יצירת פקטוריז (factories) או מערכות הזרקת תלויות (dependency injection) שבהן אתם צריכים ליצור מופעים של מחלקות באופן דינמי עם חתימות בנאי שונות.

12. InstanceType<T extends abstract new (...args: any) => any>

טיפוס השירות InstanceType<T extends abstract new (...args: any) => any> מחלץ את טיפוס המופע (instance) של טיפוס פונקציית בנאי T. זה שימושי כאשר רוצים לדעת את הטיפוס של האובייקט שהבנאי יוצר.

תחביר:

type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;

דוגמה:

class Greeter {
 greeting: string;
 constructor(message: string) {
 this.greeting = message;
 }
 greet() {
 return "Hello, " + this.greeting;
 }
}

type GreeterInstance = InstanceType<typeof Greeter>; // Greeter

const myGreeter: GreeterInstance = new Greeter("World");
console.log(myGreeter.greet());

מקרה שימוש: קביעת הטיפוס של האובייקט שנוצר על ידי בנאי, דבר שימושי בעבודה עם ירושה או פולימורפיזם. זה מספק דרך בטוחה מבחינת טיפוסים להתייחס למופע של מחלקה.

13. Record<K extends keyof any, T>

טיפוס השירות Record<K extends keyof any, T> בונה טיפוס אובייקט שמפתחות המאפיינים שלו הם K וערכי המאפיינים שלו הם T. זה שימושי ליצירת טיפוסים דמויי מילון (dictionary-like) כאשר אתם יודעים את המפתחות מראש.

תחביר:

type Record<K extends keyof any, T> = { [P in K]: T; };

דוגמה:

type CountryCode = "US" | "CA" | "GB" | "DE";

type CurrencyMap = Record<CountryCode, string>; // { US: string; CA: string; GB: string; DE: string; }

const currencies: CurrencyMap = {
 US: "USD",
 CA: "CAD",
 GB: "GBP",
 DE: "EUR",
};

מקרה שימוש: יצירת אובייקטים דמויי מילון כאשר יש לכם קבוצה קבועה של מפתחות ואתם רוצים להבטיח שלכל המפתחות יש ערכים מטיפוס ספציפי. זה נפוץ בעבודה עם קבצי תצורה, מיפוי נתונים או טבלאות בדיקה (lookup tables).

טיפוסי שירות מותאמים אישית

בעוד שטיפוסי השירות המובנים של TypeScript הם רבי עוצמה, אתם יכולים גם ליצור טיפוסי שירות מותאמים אישית משלכם כדי לתת מענה לצרכים ספציפיים בפרויקטים שלכם. זה מאפשר לכם לכמס טרנספורמציות טיפוסים מורכבות ולעשות בהן שימוש חוזר ברחבי בסיס הקוד שלכם.

דוגמה:

// טיפוס שירות לקבלת המפתחות של אובייקט שיש להם טיפוס ספציפי
type KeysOfType<T, U> = { [K in keyof T]: T[K] extends U ? K : never }[keyof T];

interface Person {
 name: string;
 age: number;
 address: string;
 phoneNumber: number;
}

type StringKeys = KeysOfType<Person, string>; // "name" | "address"

שיטות עבודה מומלצות לשימוש בטיפוסי שירות

סיכום

טיפוסי שירות ב-TypeScript הם כלים רבי עוצמה שיכולים לשפר באופן משמעותי את בטיחות הטיפוסים, יכולת השימוש החוזר והתחזוקתיות של הקוד שלכם. על ידי שליטה בטיפוסי שירות אלה, אתם יכולים לכתוב אפליקציות TypeScript חזקות ואקספרסיביות יותר. מדריך זה כיסה את טיפוסי השירות החיוניים ביותר ב-TypeScript, וסיפק דוגמאות מעשיות ותובנות יישומיות שיעזרו לכם לשלב אותם בפרויקטים שלכם.

זכרו להתנסות עם טיפוסי שירות אלה ולחקור כיצד ניתן להשתמש בהם כדי לפתור בעיות ספציפיות בקוד שלכם. ככל שתכירו אותם יותר, תמצאו את עצמכם משתמשים בהם יותר ויותר ליצירת אפליקציות TypeScript נקיות, קלות יותר לתחזוקה ובטוחות יותר מבחינת טיפוסים. בין אם אתם בונים אפליקציות רשת, אפליקציות צד-שרת, או כל דבר אחר, טיפוסי שירות מספקים סט כלים יקר ערך לשיפור זרימת העבודה בפיתוח ואיכות הקוד שלכם. על ידי מינוף כלים מובנים אלה למניפולציה של טיפוסים, אתם יכולים למצות את מלוא הפוטנציאל של TypeScript ולכתוב קוד שהוא גם אקספרסיבי וגם חזק.