M

MLOG

मराठी

टाइपस्क्रिप्ट लिटरल टाइप्सबद्दल जाणून घ्या, जे कठोर मूल्य मर्यादा लागू करून, कोडची स्पष्टता वाढवून आणि चुका टाळून एक शक्तिशाली वैशिष्ट्य आहे. व्यावहारिक उदाहरणे आणि प्रगत तंत्रांसह शिका.

टाइपस्क्रिप्ट लिटरल टाइप्स: अचूक मूल्य मर्यादांवर प्रभुत्व मिळवणे

टाइपस्क्रिप्ट, जावास्क्रिप्टचा एक सुपरसेट, वेब डेव्हलपमेंटच्या डायनॅमिक जगात स्टॅटिक टायपिंग आणते. त्याच्या सर्वात शक्तिशाली वैशिष्ट्यांपैकी एक म्हणजे लिटरल टाइप्सची संकल्पना. लिटरल टाइप्स तुम्हाला व्हेरिएबल किंवा प्रॉपर्टी कोणती अचूक व्हॅल्यू घेऊ शकते हे निर्दिष्ट करण्याची परवानगी देतात, ज्यामुळे टाइप सेफ्टी वाढते आणि अनपेक्षित चुका टाळता येतात. हा लेख लिटरल टाइप्सचा सखोल अभ्यास करेल, ज्यात सिंटॅक्स, वापर आणि व्यावहारिक उदाहरणांसह फायदे समाविष्ट असतील.

लिटरल टाइप्स म्हणजे काय?

string, number, किंवा boolean सारख्या पारंपरिक टाइप्सच्या विपरीत, लिटरल टाइप्स व्हॅल्यूजची विस्तृत श्रेणी दर्शवत नाहीत. त्याऐवजी, ते विशिष्ट, निश्चित व्हॅल्यूज दर्शवतात. टाइपस्क्रिप्ट तीन प्रकारच्या लिटरल टाइप्सना सपोर्ट करते:

लिटरल टाइप्स वापरून, तुम्ही अधिक अचूक टाइप डेफिनिशन्स तयार करू शकता जे तुमच्या डेटाच्या वास्तविक मर्यादा दर्शवतात, ज्यामुळे तुमचा कोड अधिक मजबूत आणि सांभाळण्यास सोपा होतो.

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

स्ट्रिंग लिटरल टाइप्स हे लिटरलचा सर्वात सामान्यपणे वापरला जाणारा प्रकार आहे. ते तुम्हाला हे निर्दिष्ट करण्याची परवानगी देतात की व्हेरिएबल किंवा प्रॉपर्टी फक्त पूर्वनिर्धारित स्ट्रिंग व्हॅल्यूजच्या सेटपैकी एकच व्हॅल्यू घेऊ शकते.

मूलभूत सिंटॅक्स

स्ट्रिंग लिटरल टाइप परिभाषित करण्याचा सिंटॅक्स अगदी सोपा आहे:


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

हे AllowedValues नावाचा एक टाइप परिभाषित करते जो केवळ "value1", "value2", किंवा "value3" या स्ट्रिंग्स घेऊ शकतो.

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

१. कलर पॅलेट परिभाषित करणे:

कल्पना करा की तुम्ही एक 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' प्रकारच्या पॅरामीटरला नियुक्त केला जाऊ शकत नाही.

हे उदाहरण दाखवते की स्ट्रिंग लिटरल टाइप्स कशाप्रकारे अनुमत व्हॅल्यूजचा एक कठोर संच लागू करू शकतात, ज्यामुळे डेव्हलपर्सना अनावधानाने अवैध रंग वापरण्यापासून प्रतिबंधित केले जाते.

२. API एंडपॉइंट्स परिभाषित करणे:

API सोबत काम करताना, तुम्हाला अनेकदा अनुमत एंडपॉइंट्स निर्दिष्ट करण्याची आवश्यकता असते. स्ट्रिंग लिटरल टाइप्स हे लागू करण्यास मदत करू शकतात:


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

function fetchData(endpoint: APIEndpoint) {
  // ... निर्दिष्ट एंडपॉइंटवरून डेटा आणण्यासाठी अंमलबजावणी
  console.log(`Fetching data from ${endpoint}`);
}

fetchData("/users"); // वैध
fetchData("/products"); // एरर: '"/products"' प्रकारचा युक्तिवाद 'APIEndpoint' प्रकारच्या पॅरामीटरला नियुक्त केला जाऊ शकत नाही.

हे उदाहरण सुनिश्चित करते की fetchData फंक्शन केवळ वैध API एंडपॉइंट्ससहच कॉल केले जाऊ शकते, ज्यामुळे टायपिंगमधील चुका किंवा चुकीच्या एंडपॉइंट नावामुळे होणाऱ्या चुकांचा धोका कमी होतो.

३. विविध भाषा हाताळणे (आंतरराष्ट्रीयीकरण - 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 या संख्या घेऊ शकतो.

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

१. 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 स्टेटस कोडचा वापर लागू करते, चुकीचे किंवा अ-मानक कोड वापरल्यामुळे होणाऱ्या चुका टाळते.

२. निश्चित पर्याय दर्शवणे:

कॉन्फिगरेशन ऑब्जेक्टमध्ये निश्चित पर्याय दर्शवण्यासाठी तुम्ही नंबर लिटरल टाइप्स वापरू शकता:


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 टाइपच्या समतुल्य आहे. बूलियन लिटरल टाइप्स इतर टाइप्ससोबत किंवा कंडिशनल टाइप्समध्ये एकत्रित केल्यावर अधिक उपयुक्त ठरतात.

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

१. कॉन्फिगरेशनसह कंडिशनल लॉजिक:

कॉन्फिगरेशन फ्लॅगच्या आधारावर फंक्शनचे वर्तन नियंत्रित करण्यासाठी तुम्ही बूलियन लिटरल टाइप्स वापरू शकता:


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 टाइप वापरत असले, तरी तुम्ही अधिक गुंतागुंतीचे वर्तन तयार करण्यासाठी ते कंडिशनल टाइप्स (नंतर स्पष्ट केले आहे) सोबत एकत्र करू शकता.

२. डिस्क्रिमिनेटेड युनियन्स:

बूलियन लिटरल टाइप्स युनियन टाइप्समध्ये डिस्क्रिमिनेटर म्हणून वापरले जाऊ शकतात. खालील उदाहरण विचारात घ्या:


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 चा टाइप संकुचित (narrow down) करता येतो.

लिटरल टाइप्स आणि युनियन टाइप्स एकत्र करणे

लिटरल टाइप्स जेव्हा युनियन टाइप्स (| ऑपरेटर वापरून) सोबत एकत्र केले जातात तेव्हा ते सर्वात शक्तिशाली ठरतात. हे तुम्हाला असा टाइप परिभाषित करण्याची परवानगी देते जो अनेक विशिष्ट व्हॅल्यूजपैकी एक व्हॅल्यू घेऊ शकतो.

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

१. स्टेटस टाइप परिभाषित करणे:


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 ऑब्जेक्टसाठी अनुमत स्टेटस व्हॅल्यूजचा एक विशिष्ट संच कसा लागू करावा.

२. डिव्हाइस टाइप परिभाषित करणे:

मोबाइल ऍप्लिकेशनमध्ये, तुम्हाला वेगवेगळ्या डिव्हाइस टाइप्स हाताळण्याची आवश्यकता असू शकते. हे दर्शवण्यासाठी तुम्ही स्ट्रिंग लिटरल टाइप्सचे युनियन वापरू शकता:


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

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

logDeviceType("mobile"); // वैध
logDeviceType("smartwatch"); // एरर: '"smartwatch"' प्रकारचा युक्तिवाद 'DeviceType' प्रकारच्या पॅरामीटरला नियुक्त केला जाऊ शकत नाही.

हे उदाहरण सुनिश्चित करते की logDeviceType फंक्शन केवळ वैध डिव्हाइस टाइप्ससहच कॉल केले जाते.

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

टाइप अलियासेस (type कीवर्ड वापरून) लिटरल टाइपला नाव देण्याचा एक मार्ग प्रदान करतात, ज्यामुळे तुमचा कोड अधिक वाचनीय आणि सांभाळण्यास सोपा होतो.

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

१. करन्सी कोड टाइप परिभाषित करणे:


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 फंक्शनची वाचनीयता सुधारते.

२. आठवड्याच्या दिवसाचा टाइप परिभाषित करणे:


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

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

console.log(isWeekend("Monday"));   // false
console.log(isWeekend("Saturday")); // true
console.log(isWeekend("Funday"));   // एरर: '"Funday"' प्रकारचा युक्तिवाद 'DayOfWeek' प्रकारच्या पॅरामीटरला नियुक्त केला जाऊ शकत नाही.

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

टाइपस्क्रिप्ट अनेकदा व्हेरिएबल्सना तुम्ही नियुक्त केलेल्या व्हॅल्यूजच्या आधारावर आपोआप लिटरल टाइप्स ओळखू (infer) शकते. const व्हेरिएबल्ससोबत काम करताना हे विशेषतः उपयुक्त आहे.

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

१. स्ट्रिंग लिटरल टाइप्स ओळखणे:


const apiKey = "your-api-key"; // टाइपस्क्रिप्ट apiKey चा प्रकार "your-api-key" म्हणून ओळखते

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

console.log(validateApiKey(apiKey)); // true

const anotherKey = "invalid-key";
console.log(validateApiKey(anotherKey)); // एरर: 'string' प्रकारचा युक्तिवाद '"your-api-key"' प्रकारच्या पॅरामीटरला नियुक्त केला जाऊ शकत नाही.

या उदाहरणात, टाइपस्क्रिप्ट apiKey चा टाइप स्ट्रिंग लिटरल टाइप "your-api-key" म्हणून ओळखते. तथापि, जर तुम्ही व्हेरिएबलला नॉन-कॉन्स्टंट व्हॅल्यू नियुक्त केली, तर टाइपस्क्रिप्ट सामान्यतः व्यापक string टाइप ओळखेल.

२. नंबर लिटरल टाइप्स ओळखणे:


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 असेल.

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

१. स्टेटस आणि मेसेज मॅप करणे:


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 फंक्शन टाइप-सेफ स्टेटस मेसेज देण्यासाठी या टाइपचा फायदा घेते.

२. टाइप-सेफ इव्हेंट हँडलर तयार करणे:


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 फंक्शनला योग्य डेटा पास केला जाईल हे सुनिश्चित करण्याची परवानगी देते.

लिटरल टाइप्स वापरण्यासाठी सर्वोत्तम पद्धती

तुमच्या टाइपस्क्रिप्ट प्रोजेक्ट्समध्ये लिटरल टाइप्स प्रभावीपणे वापरण्यासाठी, खालील सर्वोत्तम पद्धती विचारात घ्या:

लिटरल टाइप्स वापरण्याचे फायदे

निष्कर्ष

टाइपस्क्रिप्ट लिटरल टाइप्स हे एक शक्तिशाली वैशिष्ट्य आहे जे तुम्हाला कठोर मूल्य मर्यादा लागू करण्यास, कोडची स्पष्टता सुधारण्यास आणि चुका टाळण्यास मदत करते. त्यांचे सिंटॅक्स, वापर आणि फायदे समजून घेऊन, तुम्ही अधिक मजबूत आणि सांभाळण्यास सोपे टाइपस्क्रिप्ट ऍप्लिकेशन्स तयार करण्यासाठी लिटरल टाइप्सचा फायदा घेऊ शकता. कलर पॅलेट आणि API एंडपॉइंट्स परिभाषित करण्यापासून ते वेगवेगळ्या भाषा हाताळण्यापर्यंत आणि टाइप-सेफ इव्हेंट हँडलर तयार करण्यापर्यंत, लिटरल टाइप्स अनेक व्यावहारिक उपयोग देतात जे तुमच्या डेव्हलपमेंट वर्कफ्लोमध्ये लक्षणीय सुधारणा करू शकतात.