టైప్‌స్క్రిప్ట్ యుటిలిటీ టైప్స్‌లో నైపుణ్యం: గ్లోబల్ డెవలపర్‌ల కోసం ఒక ప్రాక్టికల్ గైడ్

టైప్‌స్క్రిప్ట్ అంతర్నిర్మిత యుటిలిటీ టైప్స్‌ యొక్క శక్తివంతమైన సెట్‌ను అందిస్తుంది, ఇవి మీ కోడ్ యొక్క టైప్ సేఫ్టీ, రీడబిలిటీ మరియు మెయింటెనబిలిటీని గణనీయంగా మెరుగుపరుస్తాయి. ఈ యుటిలిటీ టైప్స్ ప్రాథమికంగా ముందే నిర్వచించిన టైప్ ట్రాన్స్‌ఫర్మేషన్‌లు, వీటిని మీరు ఇప్పటికే ఉన్న టైప్స్‌కు వర్తింపజేయవచ్చు, పునరావృతమయ్యే మరియు దోషపూరితమైన కోడ్ వ్రాయకుండా మిమ్మల్ని కాపాడుతుంది. ఈ గైడ్ ప్రపంచవ్యాప్తంగా ఉన్న డెవలపర్‌లకు ఉపయోగపడే ప్రాక్టికల్ ఉదాహరణలతో వివిధ యుటిలిటీ టైప్స్‌ను వివరిస్తుంది.

యుటిలిటీ టైప్స్‌ను ఎందుకు ఉపయోగించాలి?

యుటిలిటీ టైప్స్ సాధారణ టైప్ మానిప్యులేషన్ దృశ్యాలను పరిష్కరిస్తాయి. వాటిని ఉపయోగించడం ద్వారా, మీరు:

• బాయిలర్‌ప్లేట్ కోడ్‌ను తగ్గించండి: పునరావృత టైప్ నిర్వచనాలను వ్రాయడం మానుకోండి.
• టైప్ సేఫ్టీని మెరుగుపరచండి: మీ కోడ్ టైప్ పరిమితులకు కట్టుబడి ఉండేలా చూసుకోండి.
• కోడ్ రీడబిలిటీని పెంచండి: మీ టైప్ నిర్వచనాలను మరింత సంక్షిప్తంగా మరియు సులభంగా అర్థమయ్యేలా చేయండి.
• మెయింటెనబిలిటీని పెంచండి: మార్పులను సులభతరం చేయండి మరియు లోపాలను ప్రవేశపెట్టే ప్రమాదాన్ని తగ్గించండి.

ప్రధాన యుటిలిటీ టైప్స్

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 అనేది 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

Omit అనేది T నుండి K ప్రాపర్టీల సెట్‌ను మినహాయించడం ద్వారా ఒక టైప్‌ను నిర్మిస్తుంది, ఇక్కడ 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 అనేది U కు కేటాయించగల అన్ని యూనియన్ సభ్యులను T నుండి మినహాయించడం ద్వారా ఒక టైప్‌ను నిర్మిస్తుంది. ఇది ఒక యూనియన్ నుండి నిర్దిష్ట టైప్స్‌ను ఫిల్టర్ చేయడానికి ఉపయోగపడుతుంది.

ఉదాహరణ:

మీరు వివిధ ఈవెంట్ టైప్స్‌ను సూచించే ఒక టైప్‌ను కలిగి ఉండవచ్చు:

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

మీరు "webinar" ఈవెంట్‌లను మినహాయించే ఒక టైప్‌ను సృష్టించాలనుకుంటే, మీరు Exclude ను ఉపయోగించవచ్చు:

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

// PhysicalEvent ఇప్పుడు "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // పొరపాటు: '"webinar"' రకం యొక్క ఆర్గ్యుమెంట్ '"concert" | "conference" | "workshop"' రకం యొక్క పారామీటర్‌కు కేటాయించబడదు.

attendPhysicalEvent("concert"); // చెల్లుతుంది

Extract

Extract అనేది U కు కేటాయించగల అన్ని యూనియన్ సభ్యులను T నుండి సంగ్రహించడం ద్వారా ఒక టైప్‌ను నిర్మిస్తుంది. ఇది Exclude కు వ్యతిరేకం.

ఉదాహరణ:

అదే EventType ను ఉపయోగిస్తూ, మీరు వెబినార్ ఈవెంట్ టైప్‌ను సంగ్రహించవచ్చు:

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

// OnlineEvent ఇప్పుడు "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // చెల్లుతుంది
// attendOnlineEvent("concert"); // పొరపాటు: '"concert"' రకం యొక్క ఆర్గ్యుమెంట్ '"webinar"' రకం యొక్క పారామీటర్‌కు కేటాయించబడదు.

NonNullable

NonNullable అనేది T నుండి null మరియు undefined ను మినహాయించడం ద్వారా ఒక టైప్‌ను నిర్మిస్తుంది.

ఉదాహరణ:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString ఇప్పుడు string

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

// processString(null); // పొరపాటు: 'null' రకం యొక్క ఆర్గ్యుమెంట్ 'string' రకం యొక్క పారామీటర్‌కు కేటాయించబడదు.
// processString(undefined); // పొరపాటు: 'undefined' రకం యొక్క ఆర్గ్యుమెంట్ 'string' రకం యొక్క పారామీటర్‌కు కేటాయించబడదు.
processString("hello"); // చెల్లుతుంది

ReturnType

ReturnType అనేది ఫంక్షన్ T యొక్క రిటర్న్ టైప్‌తో కూడిన ఒక టైప్‌ను నిర్మిస్తుంది.

ఉదాహరణ:

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

type Greeting = ReturnType<typeof greet>;

// Greeting ఇప్పుడు string

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

console.log(message);

Parameters

Parameters అనేది ఒక ఫంక్షన్ టైప్ T యొక్క పారామీటర్ల టైప్స్ నుండి ఒక టపుల్ టైప్‌ను నిర్మిస్తుంది.

ఉదాహరణ:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${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 ఇప్పుడు [message: string]

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: string; age: number; email: string; }

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

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // పొరపాటు: ప్రాపర్టీ 'age' టైప్ '{ name: string; }'లో లేదు కానీ '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(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // చెల్లుతుంది
// makeRequest("INVALID /api/users"); // పొరపాటు

కండిషనల్ టైప్స్

కండిషనల్ టైప్స్ ఒక టైప్ సంబంధంగా వ్యక్తీకరించబడిన షరతుపై ఆధారపడి ఉండే టైప్స్‌ను నిర్వచించడానికి మిమ్మల్ని అనుమతిస్తాయి. అవి టైప్ సమాచారాన్ని సంగ్రహించడానికి infer కీవర్డ్‌ను ఉపయోగిస్తాయి.

ఉదాహరణ:

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

// T ఒక Promise అయితే, టైప్ U అవుతుంది; లేకపోతే, టైప్ T అవుతుంది.

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


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

// Data ఇప్పుడు number

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" }; // పొరపాటు: 'country' లేదు 
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;
}

// API ప్రతిస్పందనను మరింత చదవగలిగే ఫార్మాట్‌లోకి మార్చండి
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; // వివిధ పర్యావరణాల కోసం ఐచ్ఛిక API URL
  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);