ടൈപ്പ്സ്ക്രിപ്റ്റ് യൂട്ടിലിറ്റി ടൈപ്പുകളിൽ പ്രാവീണ്യം നേടാം: ആഗോള ഡെവലപ്പർമാർക്കുള്ള ഒരു പ്രായോഗിക ഗൈഡ്

ടൈപ്പ്സ്ക്രിപ്റ്റ് ശക്തമായ ഒരു കൂട്ടം ബിൽറ്റ്-ഇൻ യൂട്ടിലിറ്റി ടൈപ്പുകൾ നൽകുന്നു, ഇത് നിങ്ങളുടെ കോഡിന്റെ ടൈപ്പ് സേഫ്റ്റി, വായനാക്ഷമത, പരിപാലനം എന്നിവ ഗണ്യമായി വർദ്ധിപ്പിക്കും. ഈ യൂട്ടിലിറ്റി ടൈപ്പുകൾ മുൻകൂട്ടി നിർവചിച്ച ടൈപ്പ് ട്രാൻസ്ഫോർമേഷനുകളാണ്. നിലവിലുള്ള ടൈപ്പുകളിൽ ഇവ പ്രയോഗിക്കുന്നതിലൂടെ, ആവർത്തനവും പിശകുകൾക്ക് സാധ്യതയുമുള്ള കോഡ് എഴുതുന്നത് ഒഴിവാക്കാം. ഈ ഗൈഡ് ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാർക്ക് പ്രയോജനപ്പെടുന്ന പ്രായോഗിക ഉദാഹരണങ്ങളോടൊപ്പം വിവിധ യൂട്ടിലിറ്റി ടൈപ്പുകൾ വിശദീകരിക്കും.

എന്തുകൊണ്ട് യൂട്ടിലിറ്റി ടൈപ്പുകൾ ഉപയോഗിക്കണം?

സാധാരണയായി വരുന്ന ടൈപ്പ് മാനിപ്പുലേഷൻ സാഹചര്യങ്ങളെയാണ് യൂട്ടിലിറ്റി ടൈപ്പുകൾ കൈകാര്യം ചെയ്യുന്നത്. അവ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, നിങ്ങൾക്ക്:

• ബോയിലർപ്ലേറ്റ് കോഡ് കുറയ്ക്കുക: ആവർത്തന സ്വഭാവമുള്ള ടൈപ്പ് ഡെഫനിഷനുകൾ എഴുതുന്നത് ഒഴിവാക്കുക.
• ടൈപ്പ് സേഫ്റ്റി മെച്ചപ്പെടുത്തുക: നിങ്ങളുടെ കോഡ് ടൈപ്പ് നിയന്ത്രണങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• കോഡിന്റെ വായനാക്ഷമത വർദ്ധിപ്പിക്കുക: നിങ്ങളുടെ ടൈപ്പ് ഡെഫനിഷനുകൾ കൂടുതൽ സംക്ഷിപ്തവും മനസ്സിലാക്കാൻ എളുപ്പമുള്ളതുമാക്കുക.
• പരിപാലനം എളുപ്പമാക്കുക: മാറ്റങ്ങൾ വരുത്തുന്നത് ലളിതമാക്കുകയും പിശകുകൾ വരാനുള്ള സാധ്യത കുറയ്ക്കുകയും ചെയ്യുക.

പ്രധാന യൂട്ടിലിറ്റി ടൈപ്പുകൾ

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 ആക്കി ഒരു പുതിയ ടൈപ്പ് നിർമ്മിക്കുന്നു. ഇത് ഇനീഷ്യലൈസേഷനു ശേഷം മാറ്റങ്ങൾ വരുത്തുന്നത് തടയുന്നു. ഇമ്മ്യൂട്ടബിലിറ്റി ഉറപ്പാക്കാൻ ഇത് വളരെ വിലപ്പെട്ടതാണ്.

ഉദാഹരണം:

നിങ്ങളുടെ ആഗോള ആപ്ലിക്കേഷനായുള്ള ഒരു കോൺഫിഗറേഷൻ ഒബ്ജക്റ്റ് പരിഗണിക്കുക:

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

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