ટાઇપસ્ક્રિપ્ટ યુટિલિટી ટાઇપ્સમાં નિપુણતા: વૈશ્વિક ડેવલપર્સ માટે એક વ્યવહારુ માર્ગદર્શિકા

ટાઇપસ્ક્રિપ્ટ બિલ્ટ-ઇન યુટિલિટી ટાઇપ્સનો એક શક્તિશાળી સેટ પ્રદાન કરે છે જે તમારા કોડની ટાઇપ સેફ્ટી, વાંચનક્ષમતા અને જાળવણીક્ષમતામાં નોંધપાત્ર સુધારો કરી શકે છે. આ યુટિલિટી ટાઇપ્સ અનિવાર્યપણે પૂર્વ-વ્યાખ્યાયિત ટાઇપ ટ્રાન્સફોર્મેશન્સ છે જે તમે હાલના ટાઇપ્સ પર લાગુ કરી શકો છો, જે તમને પુનરાવર્તિત અને ભૂલ-સંભવિત કોડ લખવાથી બચાવે છે. આ માર્ગદર્શિકા વિશ્વભરના ડેવલપર્સને અનુરૂપ વ્યવહારુ ઉદાહરણો સાથે વિવિધ યુટિલિટી ટાઇપ્સનું અન્વેષણ કરશે.

યુટિલિટી ટાઇપ્સ શા માટે વાપરવા?

યુટિલિટી ટાઇપ્સ સામાન્ય ટાઇપ મેનિપ્યુલેશન પરિસ્થિતિઓને સંબોધિત કરે છે. તેમનો લાભ લઈને, તમે આ કરી શકો છો:

• બોઇલરપ્લેટ કોડ ઘટાડો: પુનરાવર્તિત ટાઇપ વ્યાખ્યાઓ લખવાનું ટાળો.
• ટાઇપ સેફ્ટીમાં સુધારો: ખાતરી કરો કે તમારો કોડ ટાઇપ પ્રતિબંધોનું પાલન કરે છે.
• કોડ વાંચનક્ષમતામાં વધારો: તમારી ટાઇપ વ્યાખ્યાઓને વધુ સંક્ષિપ્ત અને સમજવામાં સરળ બનાવો.
• જાળવણીક્ષમતામાં વધારો: ફેરફારોને સરળ બનાવો અને ભૂલો થવાનું જોખમ ઘટાડો.

મુખ્ય યુટિલિટી ટાઇપ્સ

Partial

Partial એક એવો ટાઇપ બનાવે છે જ્યાં 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ની બધી પ્રોપર્ટીઝ વૈકલ્પિક હોય:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... આપેલ ID વાળા ગ્રાહકને અપડેટ કરવા માટેનો અમલીકરણ
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // માન્ય
updateCustomer("456", { address: { city: "London" } }); // માન્ય

Readonly

Readonly એક એવો ટાઇપ બનાવે છે જ્યાં T ની બધી પ્રોપર્ટીઝ readonly પર સેટ કરેલી હોય છે, જે ઇનિશિયલાઇઝેશન પછી ફેરફારને અટકાવે છે. આ ઇમ્યુટેબિલિટી (immutability) સુનિશ્ચિત કરવા માટે મૂલ્યવાન છે.

ઉદાહરણ:

તમારી વૈશ્વિક એપ્લિકેશન માટે એક કન્ફિગરેશન ઓબ્જેક્ટનો વિચાર કરો:

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 એ T માંથી U ને અસાઇન કરી શકાય તેવા બધા યુનિયન સભ્યોને બાકાત રાખીને એક ટાઇપ બનાવે છે. તે યુનિયનમાંથી ચોક્કસ ટાઇપ્સને ફિલ્ટર કરવા માટે ઉપયોગી છે.

ઉદાહરણ:

તમારી પાસે વિવિધ ઇવેન્ટ ટાઇપ્સનું પ્રતિનિધિત્વ કરતો ટાઇપ હોઈ શકે છે:

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 એ T માંથી U ને અસાઇન કરી શકાય તેવા બધા યુનિયન સભ્યોને એક્સટ્રેક્ટ કરીને એક ટાઇપ બનાવે છે. આ 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 ની બધી પ્રોપર્ટીઝને જરૂરી (required) પર સેટ કરીને એક ટાઇપ બનાવે છે. તે બધી વૈકલ્પિક પ્રોપર્ટીઝને જરૂરી બનાવે છે.

ઉદાહરણ:

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" }; // ભૂલ: '{ name: string; }' ટાઇપમાં 'age' પ્રોપર્ટી ખૂટે છે પરંતુ '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"); // માન્ય
// makeRequest("INVALID /api/users"); // ભૂલ

કન્ડિશનલ ટાઇપ્સ

કન્ડિશનલ ટાઇપ્સ તમને એવા ટાઇપ્સ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે જે ટાઇપ રિલેશનશિપ તરીકે વ્યક્ત કરેલી શરત પર આધાર રાખે છે. તેઓ ટાઇપ માહિતી એક્સટ્રેક્ટ કરવા માટે infer કીવર્ડનો ઉપયોગ કરે છે.

ઉદાહરણ:

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

// જો T એ Promise હોય, તો ટાઇપ U છે; અન્યથા, ટાઇપ T છે.

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