M

MLOG

मराठी

अधिक स्वच्छ, सुलभ आणि टाइप-सेफ कोड लिहिण्यासाठी टाइपस्क्रिप्ट युटिलिटी टाइप्सची शक्ती अनलॉक करा. जगभरातील विकासकांसाठी वास्तविक उदाहरणांसह व्यावहारिक उपयोग जाणून घ्या.

टाइपस्क्रिप्ट युटिलिटी टाइप्समध्ये प्राविण्य: जागतिक विकासकांसाठी एक व्यावहारिक मार्गदर्शक

टाइपस्क्रिप्टमध्ये अंगभूत (built-in) युटिलिटी टाइप्सचा एक शक्तिशाली संच आहे जो तुमच्या कोडची टाइप सेफ्टी, वाचनीयता आणि देखभालक्षमता लक्षणीयरीत्या वाढवू शकतो. हे युटिलिटी टाइप्स म्हणजे पूर्वनिर्धारित टाइप ट्रान्सफॉर्मेशन आहेत जे तुम्ही विद्यमान टाइप्सवर लागू करू शकता, ज्यामुळे तुम्हाला पुनरावृत्ती होणारा आणि त्रुटी-प्रवण कोड लिहिण्यापासून वाचवता येते. हे मार्गदर्शक जगभरातील विकासकांसाठी व्यावहारिक उदाहरणांसह विविध युटिलिटी टाइप्सचे अन्वेषण करेल.

युटिलिटी टाइप्स का वापरावे?

युटिलिटी टाइप्स सामान्य टाइप मॅनिप्युलेशन परिस्थितींना संबोधित करतात. त्यांचा फायदा घेऊन, तुम्ही हे करू शकता:

मुख्य युटिलिटी टाइप्स

Partial<T>

Partial<T> एक असा टाइप तयार करतो जिथे T च्या सर्व प्रॉपर्टीज पर्यायी (optional) म्हणून सेट केल्या जातात. जेव्हा तुम्हाला अंशतः अपडेट्स किंवा कॉन्फिगरेशन ऑब्जेक्ट्ससाठी टाइप तयार करायचा असेल तेव्हा हे विशेषतः उपयुक्त आहे.

उदाहरण:

कल्पना करा की तुम्ही विविध प्रदेशांतील ग्राहकांसह एक ई-कॉमर्स प्लॅटफॉर्म तयार करत आहात. तुमच्याकडे 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> हा T मधून K प्रॉपर्टीजचा संच निवडून एक टाइप तयार करतो, जिथे 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> हा T मधून K प्रॉपर्टीजचा संच वगळून एक टाइप तयार करतो, जिथे K हे स्ट्रिंग लिटरल टाइप्सचे युनियन आहे जे वगळू इच्छित असलेल्या प्रॉपर्टी नावांचे प्रतिनिधित्व करते. हे Pick च्या विरुद्ध आहे.

उदाहरण:

त्याच Event इंटरफेसचा वापर करून, जर तुम्हाला नवीन इव्हेंट्स तयार करण्यासाठी एक टाइप तयार करायचा असेल, तर तुम्ही id प्रॉपर्टी वगळू शकता, जी सामान्यतः बॅकएंडद्वारे तयार केली जाते:


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 चा वापर करून, तुम्ही वेबिनार इव्हेंट टाइप काढू शकता:


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> हा T मधून null आणि undefined वगळून एक टाइप तयार करतो.

उदाहरण:


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> हे फंक्शन टाइप 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> हे कन्स्ट्रक्टर फंक्शन टाइप 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 च्या सर्व प्रॉपर्टीज आवश्यक (required) म्हणून सेट करून एक टाइप तयार करतो. हे सर्व पर्यायी प्रॉपर्टीजला आवश्यक बनवते.

उदाहरण:


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, 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());

व्यावहारिक उपयोग आणि वास्तविक-जगातील परिस्थिती

चला अधिक क्लिष्ट वास्तविक-जगातील परिस्थितींचा शोध घेऊया जिथे युटिलिटी टाइप्स उत्कृष्ट काम करतात.

१. फॉर्म हँडलिंग

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


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

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

३. कॉन्फिगरेशन ऑब्जेक्ट्स हाताळणे

कॉन्फिगरेशन ऑब्जेक्ट्स अनेक ॲप्लिकेशन्समध्ये सामान्य असतात. युटिलिटी टाइप्स तुम्हाला कॉन्फिगरेशन ऑब्जेक्टची रचना परिभाषित करण्यात आणि ते योग्यरित्या वापरले जात असल्याची खात्री करण्यात मदत करू शकतात.


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 सारख्या मूलभूत युटिलिटी टाइप्सपासून सुरुवात करा.
  • वर्णनात्मक नावे वापरा: वाचनीयता सुधारण्यासाठी तुमच्या टाइप ॲलियासेसना अर्थपूर्ण नावे द्या.
  • युटिलिटी टाइप्स एकत्र करा: क्लिष्ट टाइप ट्रान्सफॉर्मेशन साध्य करण्यासाठी तुम्ही अनेक युटिलिटी टाइप्स एकत्र करू शकता.
  • एडिटर सपोर्टचा फायदा घ्या: युटिलिटी टाइप्सचे परिणाम पाहण्यासाठी टाइपस्क्रिप्टच्या उत्कृष्ट एडिटर सपोर्टचा फायदा घ्या.
  • मूलभूत संकल्पना समजून घ्या: युटिलिटी टाइप्सच्या प्रभावी वापरासाठी टाइपस्क्रिप्टच्या टाइप सिस्टमची ठोस समज असणे आवश्यक आहे.

निष्कर्ष

टाइपस्क्रिप्ट युटिलिटी टाइप्स ही शक्तिशाली साधने आहेत जी तुमच्या कोडची गुणवत्ता आणि देखभालक्षमता लक्षणीयरीत्या सुधारू शकतात. या युटिलिटी टाइप्सना प्रभावीपणे समजून आणि लागू करून, तुम्ही अधिक स्वच्छ, अधिक टाइप-सेफ आणि अधिक मजबूत ॲप्लिकेशन्स लिहू शकता जे जागतिक विकासाच्या लँडस्केपच्या मागण्या पूर्ण करतात. या मार्गदर्शकाने सामान्य युटिलिटी टाइप्स आणि व्यावहारिक उदाहरणांचे सर्वसमावेशक विहंगावलोकन प्रदान केले आहे. त्यांच्यासोबत प्रयोग करा आणि तुमच्या टाइपस्क्रिप्ट प्रकल्पांना वाढवण्यासाठी त्यांची क्षमता शोधा. युटिलिटी टाइप्स वापरताना वाचनीयता आणि स्पष्टतेला प्राधान्य देण्याचे लक्षात ठेवा आणि नेहमी असा कोड लिहिण्याचा प्रयत्न करा जो समजण्यास आणि सांभाळण्यास सोपा असेल, मग तुमचे सहकारी विकासक कोठेही असोत.