שליטה בסוגי עזר של TypeScript: מדריך מעשי למפתחים גלובליים

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

למה להשתמש בסוגי עזר?

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

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

סוגי עזר ליבה

Partial<T>

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

דוגמה:

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

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

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

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... implementation to update the customer with the given ID
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Valid
updateCustomer("456", { address: { city: "London" } }); // Valid

Readonly<T>

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

דוגמה:

שקול אובייקט תצורה עבור האפליקציה הגלובלית שלך:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Added version
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

כדי למנוע שינוי מקרי של התצורה לאחר האתחול, תוכל להשתמש ב-Readonly<AppConfig>:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

Pick<T, K>

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

דוגמה:

נניח שיש לך ממשק Event עם מאפיינים שונים:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

אם אתה צריך רק את title, location, ו-startTime עבור רכיב תצוגה ספציפי, אתה יכול להשתמש ב-Pick:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Event: ${event.title} at ${event.location} on ${event.startTime}`);
}

Omit<T, K>

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

דוגמה:

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

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... implementation to create a new event
}

Record<K, T>

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

דוגמה:

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

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; //Simplified
  return translations[key] || key; // Fallback to the key if no translation is found
}

console.log(translate("hello", "en")); // Output: Hello
console.log(translate("hello", "fr")); // Output: Bonjour
console.log(translate("nonexistent", "en")); // Output: nonexistent

Exclude<T, U>

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

דוגמה:

ייתכן שיש לך טיפוס המייצג סוגי אירועים שונים:

type EventType = "concert" | "conference" | "workshop" | "webinar";

אם אתה רוצה ליצור טיפוס שאינו כולל אירועי "webinar", אתה יכול להשתמש ב-Exclude:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent is now "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // Error: Argument of type '"webinar"' is not assignable to parameter of type '"concert" | "conference" | "workshop"'.

attendPhysicalEvent("concert"); // Valid

Extract<T, U>

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

דוגמה:

באמצעות אותו EventType, אתה יכול לחלץ את טיפוס אירוע ה-webinar:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent is now "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // Valid
// attendOnlineEvent("concert"); // Error: Argument of type '"concert"' is not assignable to parameter of type '"webinar"'.

NonNullable<T>

NonNullable<T> בונה טיפוס על ידי הכללת null ו-undefined מ-T.

דוגמה:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString is now string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // Error: Argument of type 'null' is not assignable to parameter of type 'string'.
// processString(undefined); // Error: Argument of type 'undefined' is not assignable to parameter of type 'string'.
processString("hello"); // Valid

ReturnType<T>

ReturnType<T> בונה טיפוס המורכב מסוג ההחזר של פונקציה T.

דוגמה:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting is now string

const message: Greeting = greet("World");

console.log(message);

Parameters<T>

Parameters<T> בונה טיפוס Tuple מסוגי הפרמטרים של טיפוס פונקציה T.

דוגמה:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams is now [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters<T>

ConstructorParameters<T> בונה טיפוס Tuple או מערך מסוגי הפרמטרים של טיפוס פונקציית קונסטרוקטור T. הוא מסיק את סוגי הארגומנטים שיש להעביר לקונסטרוקטור של מחלקה.

דוגמה:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams is now [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Outputs: Hello, World

Required<T>

Required<T> בונה טיפוס המורכב מכל המאפיינים של T מוגדרים כנדרשים. הוא הופך את כל המאפיינים האופציונליים לנדרשים.

דוגמה:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile is now { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Required'.

סוגי עזר מתקדמים

סוגי ליטרל תבנית

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

דוגמה:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL is now "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // Valid
// makeRequest("INVALID /api/users"); // Error

סוגים מותנים

סוגים מותנים מאפשרים לך להגדיר טיפוסים התלויים בתנאי המבוטא כיחס טיפוסים. הם משתמשים במילת המפתח infer כדי לחלץ מידע טיפוס.

דוגמה:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// If T is a Promise<U>, then the type is U; otherwise, the type is T.

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data is now number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

יישומים מעשיים ותרחישי עולם אמיתי

בואו נבחן תרחישי עולם אמיתי מורכבים יותר שבהם סוגי עזר זורחים.

1. טיפול בטפסים

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

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Required
  city?: string; // Optional
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Initial form values (optional fields)
type InitialFormValues = Partial<FormData>;

// Updated form values (some fields might be missing)
type UpdatedFormValues = Partial<FormData>;

// Required fields for submission
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Use these types in your form components
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // ERROR: Missing 'country' 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //OK

2. טרנספורמציית נתוני API

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

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// Transform the API response to a more readable format
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

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


// You can even enforce the type by:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

3. טיפול באובייקטי תצורה

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

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // Optional API URL for different environments
  timeout?: number;  //Optional
}

// Default settings
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Function to merge user settings with default settings
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Use the merged settings in your application
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);

טיפים לשימוש יעיל בסוגי עזר

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

סיכום

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