हिन्दी

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

टाइपस्क्रिप्ट लिटरल टाइप्स: सटीक मान बाधाओं में महारत हासिल करना

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

लिटरल टाइप्स क्या हैं?

string, number, या boolean जैसे पारंपरिक टाइप्स के विपरीत, लिटरल टाइप्स मानों की एक विस्तृत श्रेणी का प्रतिनिधित्व नहीं करते हैं। इसके बजाय, वे विशिष्ट, निश्चित मानों का प्रतिनिधित्व करते हैं। टाइपस्क्रिप्ट तीन प्रकार के लिटरल टाइप्स का समर्थन करता है:

लिटरल टाइप्स का उपयोग करके, आप अधिक सटीक टाइप परिभाषाएँ बना सकते हैं जो आपके डेटा की वास्तविक बाधाओं को दर्शाती हैं, जिससे अधिक मजबूत और रखरखाव योग्य कोड बनता है।

स्ट्रिंग लिटरल टाइप्स

स्ट्रिंग लिटरल टाइप्स सबसे अधिक उपयोग किए जाने वाले लिटरल टाइप हैं। वे आपको यह निर्दिष्ट करने की अनुमति देते हैं कि एक चर या संपत्ति केवल पूर्व-निर्धारित स्ट्रिंग मानों के सेट में से एक को ही रख सकती है।

मूल सिंटैक्स

स्ट्रिंग लिटरल टाइप को परिभाषित करने का सिंटैक्स सीधा है:


type AllowedValues = "value1" | "value2" | "value3";

यह AllowedValues नामक एक टाइप को परिभाषित करता है जो केवल "value1", "value2", या "value3" स्ट्रिंग्स को ही रख सकता है।

व्यावहारिक उदाहरण

1. एक कलर पैलेट को परिभाषित करना:

कल्पना कीजिए कि आप एक UI लाइब्रेरी बना रहे हैं और यह सुनिश्चित करना चाहते हैं कि उपयोगकर्ता केवल एक पूर्व-निर्धारित पैलेट से ही रंग निर्दिष्ट कर सकें:


type Color = "red" | "green" | "blue" | "yellow";

function paintElement(element: HTMLElement, color: Color) {
  element.style.backgroundColor = color;
}

paintElement(document.getElementById("myElement")!, "red"); // मान्य
paintElement(document.getElementById("myElement")!, "purple"); // त्रुटि: '"purple"' प्रकार का आर्ग्यूमेंट 'Color' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण दिखाता है कि स्ट्रिंग लिटरल टाइप्स कैसे अनुमत मानों का एक सख्त सेट लागू कर सकते हैं, जिससे डेवलपर्स को गलती से अमान्य रंगों का उपयोग करने से रोका जा सकता है।

2. एपीआई एंडपॉइंट्स को परिभाषित करना:

एपीआई के साथ काम करते समय, आपको अक्सर अनुमत एंडपॉइंट्स को निर्दिष्ट करने की आवश्यकता होती है। स्ट्रिंग लिटरल टाइप्स इसे लागू करने में मदद कर सकते हैं:


type APIEndpoint = "/users" | "/posts" | "/comments";

function fetchData(endpoint: APIEndpoint) {
  // ... निर्दिष्ट एंडपॉइंट से डेटा लाने का कार्यान्वयन
  console.log(`Fetching data from ${endpoint}`);
}

fetchData("/users"); // मान्य
fetchData("/products"); // त्रुटि: '"/products"' प्रकार का आर्ग्यूमेंट 'APIEndpoint' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण सुनिश्चित करता है कि fetchData फ़ंक्शन को केवल मान्य एपीआई एंडपॉइंट्स के साथ ही कॉल किया जा सकता है, जिससे टाइपो या गलत एंडपॉइंट नामों के कारण होने वाली त्रुटियों का खतरा कम हो जाता है।

3. विभिन्न भाषाओं को संभालना (अंतर्राष्ट्रीयकरण - i18n):

वैश्विक अनुप्रयोगों में, आपको विभिन्न भाषाओं को संभालने की आवश्यकता हो सकती है। आप यह सुनिश्चित करने के लिए स्ट्रिंग लिटरल टाइप्स का उपयोग कर सकते हैं कि आपका एप्लिकेशन केवल निर्दिष्ट भाषाओं का समर्थन करता है:


type Language = "en" | "es" | "fr" | "de" | "zh";

function translate(text: string, language: Language): string {
  // ... टेक्स्ट को निर्दिष्ट भाषा में अनुवाद करने का कार्यान्वयन
  console.log(`Translating '${text}' to ${language}`);
  return "Translated text"; // प्लेसहोल्डर
}

translate("Hello", "en"); // मान्य
translate("Hello", "ja"); // त्रुटि: '"ja"' प्रकार का आर्ग्यूमेंट 'Language' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण दिखाता है कि यह कैसे सुनिश्चित किया जाए कि आपके एप्लिकेशन के भीतर केवल समर्थित भाषाओं का ही उपयोग किया जाए।

नंबर लिटरल टाइप्स

नंबर लिटरल टाइप्स आपको यह निर्दिष्ट करने की अनुमति देते हैं कि एक चर या संपत्ति केवल एक विशिष्ट संख्यात्मक मान ही रख सकती है।

मूल सिंटैक्स

नंबर लिटरल टाइप को परिभाषित करने का सिंटैक्स स्ट्रिंग लिटरल टाइप्स के समान है:


type StatusCode = 200 | 404 | 500;

यह StatusCode नामक एक टाइप को परिभाषित करता है जो केवल 200, 404, या 500 संख्याएँ ही रख सकता है।

व्यावहारिक उदाहरण

1. HTTP स्टेटस कोड को परिभाषित करना:

आप HTTP स्टेटस कोड का प्रतिनिधित्व करने के लिए नंबर लिटरल टाइप्स का उपयोग कर सकते हैं, यह सुनिश्चित करते हुए कि आपके एप्लिकेशन में केवल मान्य कोड का उपयोग किया जाता है:


type HTTPStatus = 200 | 400 | 401 | 403 | 404 | 500;

function handleResponse(status: HTTPStatus) {
  switch (status) {
    case 200:
      console.log("Success!");
      break;
    case 400:
      console.log("Bad Request");
      break;
    // ... अन्य मामले
    default:
      console.log("Unknown Status");
  }
}

handleResponse(200); // मान्य
handleResponse(600); // त्रुटि: '600' प्रकार का आर्ग्यूमेंट 'HTTPStatus' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण मान्य HTTP स्टेटस कोड के उपयोग को लागू करता है, जिससे गलत या गैर-मानक कोड का उपयोग करने के कारण होने वाली त्रुटियों को रोका जा सकता है।

2. निश्चित विकल्पों का प्रतिनिधित्व करना:

आप एक कॉन्फ़िगरेशन ऑब्जेक्ट में निश्चित विकल्पों का प्रतिनिधित्व करने के लिए नंबर लिटरल टाइप्स का उपयोग कर सकते हैं:


type RetryAttempts = 1 | 3 | 5;

interface Config {
  retryAttempts: RetryAttempts;
}

const config1: Config = { retryAttempts: 3 }; // मान्य
const config2: Config = { retryAttempts: 7 }; // त्रुटि: '{ retryAttempts: 7; }' प्रकार 'Config' प्रकार को असाइन करने योग्य नहीं है।

यह उदाहरण retryAttempts के लिए संभावित मानों को एक विशिष्ट सेट तक सीमित करता है, जिससे आपके कॉन्फ़िगरेशन की स्पष्टता और विश्वसनीयता में सुधार होता है।

बूलियन लिटरल टाइप्स

बूलियन लिटरल टाइप्स विशिष्ट मान true या false का प्रतिनिधित्व करते हैं। यद्यपि वे स्ट्रिंग या नंबर लिटरल टाइप्स की तुलना में कम बहुमुखी लग सकते हैं, वे विशिष्ट परिदृश्यों में उपयोगी हो सकते हैं।

मूल सिंटैक्स

बूलियन लिटरल टाइप को परिभाषित करने का सिंटैक्स है:


type IsEnabled = true | false;

हालांकि, सीधे true | false का उपयोग करना निरर्थक है क्योंकि यह boolean टाइप के बराबर है। बूलियन लिटरल टाइप्स तब अधिक उपयोगी होते हैं जब उन्हें अन्य टाइप्स के साथ या कंडीशनल टाइप्स में जोड़ा जाता है।

व्यावहारिक उदाहरण

1. कॉन्फ़िगरेशन के साथ कंडीशनल लॉजिक:

आप एक कॉन्फ़िगरेशन फ़्लैग के आधार पर एक फ़ंक्शन के व्यवहार को नियंत्रित करने के लिए बूलियन लिटरल टाइप्स का उपयोग कर सकते हैं:


interface FeatureFlags {
  darkMode: boolean;
  newUserFlow: boolean;
}

function initializeApp(flags: FeatureFlags) {
  if (flags.darkMode) {
    // डार्क मोड सक्षम करें
    console.log("Enabling dark mode...");
  } else {
    // लाइट मोड का उपयोग करें
    console.log("Using light mode...");
  }

  if (flags.newUserFlow) {
    // नया उपयोगकर्ता प्रवाह सक्षम करें
    console.log("Enabling new user flow...");
  } else {
    // पुराने उपयोगकर्ता प्रवाह का उपयोग करें
    console.log("Using old user flow...");
  }
}

initializeApp({ darkMode: true, newUserFlow: false });

यद्यपि यह उदाहरण मानक boolean टाइप का उपयोग करता है, आप इसे अधिक जटिल व्यवहार बनाने के लिए कंडीशनल टाइप्स (बाद में समझाया गया) के साथ जोड़ सकते हैं।

2. डिस्क्रिमिनेटेड यूनियन्स:

बूलियन लिटरल टाइप्स का उपयोग यूनियन टाइप्स में डिस्क्रिमिनेटर के रूप में किया जा सकता है। निम्नलिखित उदाहरण पर विचार करें:


interface SuccessResult {
  success: true;
  data: any;
}

interface ErrorResult {
  success: false;
  error: string;
}

type Result = SuccessResult | ErrorResult;

function processResult(result: Result) {
  if (result.success) {
    console.log("Success:", result.data);
  } else {
    console.error("Error:", result.error);
  }
}

processResult({ success: true, data: { name: "John" } });
processResult({ success: false, error: "Failed to fetch data" });

यहां, success प्रॉपर्टी, जो एक बूलियन लिटरल टाइप है, एक डिस्क्रिमिनेटर के रूप में कार्य करती है, जिससे टाइपस्क्रिप्ट को if स्टेटमेंट के भीतर result के टाइप को संकुचित करने की अनुमति मिलती है।

लिटरल टाइप्स को यूनियन टाइप्स के साथ मिलाना

लिटरल टाइप्स तब सबसे शक्तिशाली होते हैं जब उन्हें यूनियन टाइप्स (| ऑपरेटर का उपयोग करके) के साथ जोड़ा जाता है। यह आपको एक ऐसा टाइप परिभाषित करने की अनुमति देता है जो कई विशिष्ट मानों में से एक को धारण कर सकता है।

व्यावहारिक उदाहरण

1. एक स्टेटस टाइप को परिभाषित करना:


type Status = "pending" | "in progress" | "completed" | "failed";

interface Task {
  id: number;
  description: string;
  status: Status;
}

const task1: Task = { id: 1, description: "Implement login", status: "in progress" }; // मान्य
const task2: Task = { id: 2, description: "Implement logout", status: "done" };       // त्रुटि: '{ id: number; description: string; status: string; }' प्रकार 'Task' प्रकार को असाइन करने योग्य नहीं है।

यह उदाहरण दिखाता है कि एक Task ऑब्जेक्ट के लिए अनुमत स्टेटस मानों का एक विशिष्ट सेट कैसे लागू किया जाए।

2. एक डिवाइस टाइप को परिभाषित करना:

एक मोबाइल एप्लिकेशन में, आपको विभिन्न डिवाइस प्रकारों को संभालने की आवश्यकता हो सकती है। आप इनका प्रतिनिधित्व करने के लिए स्ट्रिंग लिटरल टाइप्स के यूनियन का उपयोग कर सकते हैं:


type DeviceType = "mobile" | "tablet" | "desktop";

function logDeviceType(device: DeviceType) {
  console.log(`Device type: ${device}`);
}

logDeviceType("mobile"); // मान्य
logDeviceType("smartwatch"); // त्रुटि: '"smartwatch"' प्रकार का आर्ग्यूमेंट 'DeviceType' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण सुनिश्चित करता है कि logDeviceType फ़ंक्शन को केवल मान्य डिवाइस प्रकारों के साथ ही कॉल किया जाए।

टाइप अलियास के साथ लिटरल टाइप्स

टाइप अलियास (type कीवर्ड का उपयोग करके) एक लिटरल टाइप को नाम देने का एक तरीका प्रदान करते हैं, जिससे आपका कोड अधिक पठनीय और रखरखाव योग्य हो जाता है।

व्यावहारिक उदाहरण

1. एक करेंसी कोड टाइप को परिभाषित करना:


type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY";

function formatCurrency(amount: number, currency: CurrencyCode): string {
  // ... करेंसी कोड के आधार पर राशि को प्रारूपित करने का कार्यान्वयन
  console.log(`Formatting ${amount} in ${currency}`);
  return "Formatted amount"; // प्लेसहोल्डर
}

formatCurrency(100, "USD"); // मान्य
formatCurrency(200, "CAD"); // त्रुटि: '"CAD"' प्रकार का आर्ग्यूमेंट 'CurrencyCode' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण करेंसी कोड के एक सेट के लिए एक CurrencyCode टाइप अलियास को परिभाषित करता है, जिससे formatCurrency फ़ंक्शन की पठनीयता में सुधार होता है।

2. सप्ताह के दिन का टाइप परिभाषित करना:


type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

function isWeekend(day: DayOfWeek): boolean {
  return day === "Saturday" || day === "Sunday";
}

console.log(isWeekend("Monday"));   // गलत
console.log(isWeekend("Saturday")); // सही
console.log(isWeekend("Funday"));   // त्रुटि: '"Funday"' प्रकार का आर्ग्यूमेंट 'DayOfWeek' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

लिटरल इन्फेरेंस

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

व्यावहारिक उदाहरण

1. स्ट्रिंग लिटरल टाइप्स का अनुमान लगाना:


const apiKey = "your-api-key"; // टाइपस्क्रिप्ट apiKey के प्रकार का अनुमान "your-api-key" के रूप में लगाता है

function validateApiKey(key: "your-api-key") {
  return key === "your-api-key";
}

console.log(validateApiKey(apiKey)); // सही

const anotherKey = "invalid-key";
console.log(validateApiKey(anotherKey)); // त्रुटि: 'string' प्रकार का आर्ग्यूमेंट '"your-api-key"' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

इस उदाहरण में, टाइपस्क्रिप्ट apiKey के प्रकार का अनुमान स्ट्रिंग लिटरल टाइप "your-api-key" के रूप में लगाता है। हालाँकि, यदि आप किसी वेरिएबल को एक गैर-स्थिर मान असाइन करते हैं, तो टाइपस्क्रिप्ट आमतौर पर व्यापक string प्रकार का अनुमान लगाएगा।

2. नंबर लिटरल टाइप्स का अनुमान लगाना:


const port = 8080; // टाइपस्क्रिप्ट port के प्रकार का अनुमान 8080 के रूप में लगाता है

function startServer(portNumber: 8080) {
  console.log(`Starting server on port ${portNumber}`);
}

startServer(port); // मान्य

const anotherPort = 3000;
startServer(anotherPort); // त्रुटि: 'number' प्रकार का आर्ग्यूमेंट '8080' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

कंडीशनल टाइप्स के साथ लिटरल टाइप्स का उपयोग करना

लिटरल टाइप्स तब और भी शक्तिशाली हो जाते हैं जब उन्हें कंडीशनल टाइप्स के साथ जोड़ा जाता है। कंडीशनल टाइप्स आपको ऐसे टाइप्स को परिभाषित करने की अनुमति देते हैं जो अन्य टाइप्स पर निर्भर करते हैं, जिससे बहुत लचीले और अभिव्यंजक टाइप सिस्टम बनते हैं।

मूल सिंटैक्स

एक कंडीशनल टाइप का सिंटैक्स है:


TypeA extends TypeB ? TypeC : TypeD

इसका मतलब है: यदि TypeA, TypeB को असाइन किया जा सकता है, तो परिणामी टाइप TypeC है; अन्यथा, परिणामी टाइप TypeD है।

व्यावहारिक उदाहरण

1. स्टेटस को संदेश से मैप करना:


type Status = "pending" | "in progress" | "completed" | "failed";

type StatusMessage = T extends "pending"
  ? "Waiting for action"
  : T extends "in progress"
  ? "Currently processing"
  : T extends "completed"
  ? "Task finished successfully"
  : "An error occurred";

function getStatusMessage(status: T): StatusMessage {
  switch (status) {
    case "pending":
      return "Waiting for action" as StatusMessage;
    case "in progress":
      return "Currently processing" as StatusMessage;
    case "completed":
      return "Task finished successfully" as StatusMessage;
    case "failed":
      return "An error occurred" as StatusMessage;
    default:
      throw new Error("Invalid status");
  }
}

console.log(getStatusMessage("pending"));    // Waiting for action
console.log(getStatusMessage("in progress")); // Currently processing
console.log(getStatusMessage("completed"));   // Task finished successfully
console.log(getStatusMessage("failed"));      // An error occurred

यह उदाहरण एक StatusMessage टाइप को परिभाषित करता है जो प्रत्येक संभावित स्टेटस को कंडीशनल टाइप्स का उपयोग करके एक संबंधित संदेश से मैप करता है। getStatusMessage फ़ंक्शन टाइप-सेफ स्टेटस संदेश प्रदान करने के लिए इस टाइप का लाभ उठाता है।

2. एक टाइप-सेफ इवेंट हैंडलर बनाना:


type EventType = "click" | "mouseover" | "keydown";

type EventData = T extends "click"
  ? { x: number; y: number; } // क्लिक इवेंट डेटा
  : T extends "mouseover"
  ? { target: HTMLElement; }   // माउसओवर इवेंट डेटा
  : { key: string; }             // कीडाउन इवेंट डेटा

function handleEvent(type: T, data: EventData) {
  console.log(`Handling event type ${type} with data:`, data);
}

handleEvent("click", { x: 10, y: 20 }); // मान्य
handleEvent("mouseover", { target: document.getElementById("myElement")! }); // मान्य
handleEvent("keydown", { key: "Enter" }); // मान्य

handleEvent("click", { key: "Enter" }); // त्रुटि: '{ key: string; }' प्रकार का आर्ग्यूमेंट '{ x: number; y: number; }' प्रकार के पैरामीटर को असाइन नहीं किया जा सकता है।

यह उदाहरण एक EventData टाइप बनाता है जो इवेंट प्रकार के आधार पर विभिन्न डेटा संरचनाओं को परिभाषित करता है। यह आपको यह सुनिश्चित करने की अनुमति देता है कि प्रत्येक इवेंट प्रकार के लिए handleEvent फ़ंक्शन को सही डेटा पास किया जाए।

लिटरल टाइप्स का उपयोग करने के लिए सर्वोत्तम अभ्यास

अपने टाइपस्क्रिप्ट प्रोजेक्ट्स में लिटरल टाइप्स का प्रभावी ढंग से उपयोग करने के लिए, निम्नलिखित सर्वोत्तम प्रथाओं पर विचार करें:

लिटरल टाइप्स का उपयोग करने के लाभ

निष्कर्ष

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