टाइपस्क्रिप्ट यूटिलिटी प्रकारों में महारत हासिल करना: वैश्विक डेवलपर्स के लिए एक व्यावहारिक मार्गदर्शिका

टाइपस्क्रिप्ट अंतर्निहित यूटिलिटी प्रकारों का एक शक्तिशाली सेट प्रदान करता है जो आपके कोड की प्रकार सुरक्षा, पठनीयता और रखरखाव क्षमता को महत्वपूर्ण रूप से बढ़ा सकता है। ये यूटिलिटी प्रकार अनिवार्य रूप से पूर्वनिर्धारित प्रकार परिवर्तन हैं जिन्हें आप मौजूदा प्रकारों पर लागू कर सकते हैं, जिससे आप दोहराव वाले और त्रुटि-प्रवण कोड लिखने से बच जाते हैं। यह मार्गदर्शिका विभिन्न यूटिलिटी प्रकारों का पता लगाएगी, जिसमें व्यावहारिक उदाहरण हैं जो दुनिया भर के डेवलपर्स के साथ प्रतिध्वनित होते हैं।

यूटिलिटी प्रकारों का उपयोग क्यों करें?

यूटिलिटी प्रकार सामान्य प्रकार हेरफेर परिदृश्यों को संबोधित करते हैं। उनका लाभ उठाकर, आप यह कर सकते हैं:

• बॉयलरप्लेट कोड कम करें: दोहराव वाली प्रकार परिभाषाएँ लिखने से बचें।
• प्रकार सुरक्षा में सुधार करें: सुनिश्चित करें कि आपका कोड प्रकार बाधाओं का पालन करता है।
• कोड की पठनीयता बढ़ाएँ: अपनी प्रकार परिभाषाओं को अधिक संक्षिप्त और समझने में आसान बनाएँ।
• रखरखाव क्षमता बढ़ाएँ: संशोधनों को सरल बनाएँ और त्रुटियाँ करने के जोखिम को कम करें।

कोर यूटिलिटी प्रकार

Partial

Partial एक प्रकार का निर्माण करता है जहाँ 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 की सभी संपत्तियाँ वैकल्पिक हैं:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... दिए गए आईडी के साथ ग्राहक को अपडेट करने के लिए कार्यान्वयन
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // मान्य
updateCustomer("456", { address: { city: "London" } }); // मान्य

Readonly

Readonly एक प्रकार का निर्माण करता है जहाँ T की सभी संपत्तियों को readonly पर सेट किया जाता है, जो आरंभिकरण के बाद संशोधन को रोकता है। यह अपरिवर्तनीयता सुनिश्चित करने के लिए मूल्यवान है।

उदाहरण:

अपने वैश्विक एप्लिकेशन के लिए एक कॉन्फ़िगरेशन ऑब्जेक्ट पर विचार करें:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // जोड़ा गया संस्करण
}

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

आरंभीकरण के बाद कॉन्फ़िगरेशन के आकस्मिक संशोधन को रोकने के लिए, आप Readonly का उपयोग कर सकते हैं:

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"; // त्रुटि: 'apiUrl' को असाइन नहीं किया जा सकता क्योंकि यह केवल-पढ़ने की संपत्ति है।

Pick

Pick गुणों के सेट 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.title} पर ${event.location} पर ${event.startTime}`);
}

Omit

Omit गुणों के सेट K को T से बाहर करके एक प्रकार का निर्माण करता है, जहाँ K स्ट्रिंग शाब्दिक प्रकारों का एक संघ है जो उन संपत्ति नामों का प्रतिनिधित्व करता है जिन्हें आप बाहर करना चाहते हैं। यह Pick के विपरीत है।

उदाहरण:

उसी Event इंटरफ़ेस का उपयोग करते हुए, यदि आप नए ईवेंट बनाने के लिए एक प्रकार बनाना चाहते हैं, तो आप id संपत्ति को बाहर करना चाह सकते हैं, जो आमतौर पर बैकएंड द्वारा उत्पन्न होती है:

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

function createEvent(event: NewEvent): void {
  // ... एक नया ईवेंट बनाने के लिए कार्यान्वयन
}

Record

Record एक ऑब्जेक्ट प्रकार का निर्माण करता है जिसके संपत्ति कुंजियाँ 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; //सरलीकृत
  return translations[key] || key; // यदि कोई अनुवाद नहीं मिलता है तो कुंजी पर वापस जाएँ
}

console.log(translate("hello", "en")); // आउटपुट: Hello
console.log(translate("hello", "fr")); // आउटपुट: Bonjour
console.log(translate("nonexistent", "en")); // आउटपुट: nonexistent

Exclude

Exclude T से उन सभी संघ सदस्यों को बाहर करके एक प्रकार का निर्माण करता है जिन्हें U को असाइन किया जा सकता है। यह एक संघ से विशिष्ट प्रकारों को फ़िल्टर करने के लिए उपयोगी है।

उदाहरण:

आपके पास विभिन्न ईवेंट प्रकारों का प्रतिनिधित्व करने वाला एक प्रकार हो सकता है:

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

यदि आप एक ऐसा प्रकार बनाना चाहते हैं जो "वेबिनार" ईवेंट को बाहर करता है, तो आप Exclude का उपयोग कर सकते हैं:

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

// PhysicalEvent अब "concert" | "conference" | "workshop" है

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`एक ${event} में भाग लेना`);
}

// attendPhysicalEvent("webinar"); // त्रुटि: प्रकार '"वेबिनार"' का तर्क प्रकार '"concert" | "conference" | "workshop"' के पैरामीटर को असाइन करने योग्य नहीं है।

attendPhysicalEvent("concert"); // मान्य

Extract

Extract T से उन सभी संघ सदस्यों को निकालकर एक प्रकार का निर्माण करता है जिन्हें U को असाइन किया जा सकता है। यह Exclude के विपरीत है।

उदाहरण:

उसी EventType का उपयोग करते हुए, आप वेबिनार ईवेंट प्रकार को निकाल सकते हैं:

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

// OnlineEvent अब "वेबिनार" है

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`एक ${event} ऑनलाइन में भाग लेना`);
}

attendOnlineEvent("webinar"); // मान्य
// attendOnlineEvent("concert"); // त्रुटि: प्रकार '"concert"' का तर्क प्रकार '"webinar"' के पैरामीटर को असाइन करने योग्य नहीं है।

NonNullable

NonNullable T से null और undefined को बाहर करके एक प्रकार का निर्माण करता है।

उदाहरण:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString अब स्ट्रिंग है

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

// processString(null); // त्रुटि: प्रकार 'null' का तर्क प्रकार 'स्ट्रिंग' के पैरामीटर को असाइन करने योग्य नहीं है।
// processString(undefined); // त्रुटि: प्रकार 'undefined' का तर्क प्रकार 'स्ट्रिंग' के पैरामीटर को असाइन करने योग्य नहीं है।
processString("hello"); // मान्य

ReturnType

ReturnType फ़ंक्शन T के रिटर्न प्रकार से मिलकर एक प्रकार का निर्माण करता है।

उदाहरण:

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

type Greeting = ReturnType<typeof greet>;

// Greeting अब स्ट्रिंग है

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

console.log(message);

Parameters

Parameters एक फ़ंक्शन प्रकार T के मापदंडों के प्रकारों से एक टपल प्रकार का निर्माण करता है।

उदाहरण:

function logEvent(eventName: string, eventData: object): void {
  console.log(`ईवेंट: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams अब [eventName: string, eventData: object] है

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

logEvent(...params);

ConstructorParameters

ConstructorParameters एक कंस्ट्रक्टर फ़ंक्शन प्रकार T के मापदंडों के प्रकारों से एक टपल या सरणी प्रकार का निर्माण करता है। यह उन तर्कों के प्रकारों का अनुमान लगाता है जिन्हें किसी वर्ग के कंस्ट्रक्टर को पारित करने की आवश्यकता होती है।

उदाहरण:

class Greeter {
  greeting: string;

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

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


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams अब [संदेश: स्ट्रिंग] है

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

console.log(greeterInstance.greet()); // आउटपुट: Hello, World

Required

Required T के सभी गुणों से मिलकर एक प्रकार का निर्माण करता है जिसे आवश्यक पर सेट किया जाता है। यह सभी वैकल्पिक गुणों को आवश्यक बनाता है।

उदाहरण:

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

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile अब { name: स्ट्रिंग; आयु: संख्या; ईमेल: स्ट्रिंग; } है

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

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // त्रुटि: प्रकार '{ नाम: स्ट्रिंग; }' में संपत्ति 'आयु' गुम है लेकिन प्रकार 'Required' में आवश्यक है।

उन्नत यूटिलिटी प्रकार

टेम्पलेट शाब्दिक प्रकार

टेम्पलेट शाब्दिक प्रकार आपको मौजूदा स्ट्रिंग शाब्दिक प्रकारों, संख्या शाब्दिक प्रकारों और बहुत कुछ को जोड़कर नए स्ट्रिंग शाब्दिक प्रकारों का निर्माण करने की अनुमति देते हैं। यह शक्तिशाली स्ट्रिंग-आधारित प्रकार हेरफेर को सक्षम बनाता है।

उदाहरण:

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

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

// RequestURL अब "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(` ${url} अनुरोध करना`);
}

makeRequest("GET /api/users"); // मान्य
// makeRequest("INVALID /api/users"); // त्रुटि

सशर्त प्रकार

सशर्त प्रकार आपको उन प्रकारों को परिभाषित करने की अनुमति देते हैं जो प्रकार संबंध के रूप में व्यक्त की गई स्थिति पर निर्भर करते हैं। वे प्रकार की जानकारी निकालने के लिए infer कीवर्ड का उपयोग करते हैं।

उदाहरण:

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

// यदि T एक Promise है, तो प्रकार U है; अन्यथा, प्रकार T है।

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


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

// डेटा अब नंबर है

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

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // आवश्यक
  city?: string; // वैकल्पिक
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// प्रारंभिक फ़ॉर्म मान (वैकल्पिक फ़ील्ड)
type InitialFormValues = Partial<FormData>;

// अपडेट किए गए फ़ॉर्म मान (कुछ फ़ील्ड गायब हो सकते हैं)
type UpdatedFormValues = Partial<FormData>;

// सबमिशन के लिए आवश्यक फ़ील्ड
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// अपने फ़ॉर्म घटकों में इन प्रकारों का उपयोग करें
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" }; // त्रुटि: 'देश' गायब है
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //ठीक

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

// एपीआई प्रतिक्रिया को अधिक पठनीय प्रारूप में बदलें
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));
}


// आप प्रकार को भी लागू कर सकते हैं:

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;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // विभिन्न वातावरणों के लिए वैकल्पिक एपीआई यूआरएल
  timeout?: number;  //वैकल्पिक
}

// डिफ़ॉल्ट सेटिंग्स
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// डिफ़ॉल्ट सेटिंग्स के साथ उपयोगकर्ता सेटिंग्स को मर्ज करने का फ़ंक्शन
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// अपने एप्लिकेशन में मर्ज की गई सेटिंग्स का उपयोग करें
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);