TypeScript Yordamchi Tiplarini O'zlashtirish: Global Dasturchilar uchun Amaliy Qo'llanma

TypeScript o'rnatilgan kuchli yordamchi tiplar to'plamini taklif qiladi, bu sizning kodingizning tiplar xavfsizligini, o'qilishi osonligini va qo'llab-quvvatlanishini sezilarli darajada yaxshilashi mumkin. Bu yordamchi tiplar, aslida, mavjud tiplarga qo'llashingiz mumkin bo'lgan oldindan belgilangan tip o'zgartirishlari bo'lib, sizni takrorlanuvchi va xatolarga moyil kod yozishdan saqlaydi. Ushbu qo'llanma butun dunyo bo'ylab dasturchilar uchun mos keladigan amaliy misollar bilan turli yordamchi tiplarni o'rganadi.

Nima uchun Yordamchi Tiplardan Foydalanish Kerak?

Yordamchi tiplar keng tarqalgan tiplarni manipulyatsiya qilish stsenariylarini hal qiladi. Ulardan foydalanib, siz quyidagilarni amalga oshirishingiz mumkin:

• Ortiqcha kodni kamaytirish: Takrorlanuvchi tip ta'riflarini yozishdan saqlaning.
• Tiplar xavfsizligini oshirish: Kodingiz tip cheklovlariga rioya qilishini ta'minlang.
• Kodning o'qilishi osonligini yaxshilash: Tip ta'riflaringizni yanada ixcham va tushunarli qiling.
• Qo'llab-quvvatlanishni oshirish: O'zgartirishlarni soddalashtiring va xatolarni kiritish xavfini kamaytiring.

Asosiy Yordamchi Tiplar

Partial<T>

Partial<T> T ning barcha xususiyatlari ixtiyoriy qilib belgilangan tipni yaratadi. Bu, ayniqsa, qisman yangilanishlar yoki konfiguratsiya obyektlari uchun tip yaratmoqchi bo'lganingizda foydalidir.

Misol:

Tasavvur qiling, siz turli mintaqalardagi mijozlar uchun elektron tijorat platformasini quryapsiz. Sizda Customer tipi mavjud:

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

Mijoz ma'lumotlarini yangilashda siz barcha maydonlarni talab qilishni xohlamasligingiz mumkin. Partial<Customer> sizga Customerning barcha xususiyatlari ixtiyoriy bo'lgan tipni aniqlashga imkon beradi:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... mijozni berilgan ID bilan yangilash uchun implementatsiya
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // To'g'ri
updateCustomer("456", { address: { city: "London" } }); // To'g'ri

Readonly<T>

Readonly<T> T ning barcha xususiyatlari readonly (faqat o'qish uchun) qilib belgilangan tipni yaratadi, bu esa initsializatsiyadan keyin o'zgartirishni oldini oladi. Bu o'zgarmaslikni (immutability) ta'minlash uchun qimmatlidir.

Misol:

Global ilovangiz uchun konfiguratsiya obyektini ko'rib chiqing:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Versiya qo'shildi
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

Initsializatsiyadan keyin konfiguratsiyani tasodifiy o'zgartirishni oldini olish uchun siz Readonly<AppConfig> dan foydalanishingiz mumkin:

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"; // Xato: 'apiUrl'ga qiymat berib bo'lmaydi, chunki u faqat o'qish uchun mo'ljallangan xususiyat.

Pick<T, K>

Pick<T, K> T dan K xususiyatlar to'plamini tanlab olib, yangi tip yaratadi, bu yerda K siz kiritmoqchi bo'lgan xususiyat nomlarini ifodalovchi satr literal tiplarining birlashmasidir.

Misol:

Aytaylik, sizda turli xususiyatlarga ega Event interfeysi mavjud:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

Agar sizga ma'lum bir ko'rsatuv komponenti uchun faqat title, location, va startTime kerak bo'lsa, siz Pick dan foydalanishingiz mumkin:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Tadbir: ${event.title} manzili ${event.location} vaqti ${event.startTime}`);
}

Omit<T, K>

Omit<T, K> T dan K xususiyatlar to'plamini chiqarib tashlab, yangi tip yaratadi, bu yerda K siz chiqarib tashlamoqchi bo'lgan xususiyat nomlarini ifodalovchi satr literal tiplarining birlashmasidir. Bu Pickning teskarisi.

Misol:

Xuddi shu Event interfeysidan foydalanib, yangi tadbirlar yaratish uchun tip yaratmoqchi bo'lsangiz, odatda backend tomonidan yaratiladigan id xususiyatini chiqarib tashlashni xohlashingiz mumkin:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... yangi tadbir yaratish uchun implementatsiya
}

Record<K, T>

Record<K, T> xususiyat kalitlari K va xususiyat qiymatlari T bo'lgan obyekt tipini yaratadi. K satr literal tiplari, raqam literal tiplari yoki simvol birlashmasi bo'lishi mumkin. Bu lug'atlar yoki xaritalar yaratish uchun juda mos keladi.

Misol:

Ilovangizning foydalanuvchi interfeysi uchun tarjimalarni saqlashingiz kerakligini tasavvur qiling. Siz Record dan foydalanib, tarjimalaringiz uchun tipni aniqlashingiz mumkin:

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; // Soddalashtirilgan
  return translations[key] || key; // Agar tarjima topilmasa, kalitni qaytarish
}

console.log(translate("hello", "en")); // Chiqish: Hello
console.log(translate("hello", "fr")); // Chiqish: Bonjour
console.log(translate("nonexistent", "en")); // Chiqish: nonexistent

Exclude<T, U>

Exclude<T, U> T dan U ga tayinlanishi mumkin bo'lgan barcha birlashma a'zolarini chiqarib tashlab, yangi tip yaratadi. Bu birlashmadan ma'lum tiplarni filtrlash uchun foydalidir.

Misol:

Sizda turli tadbir turlarini ifodalovchi tip bo'lishi mumkin:

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

Agar siz "webinar" tadbirlarini chiqarib tashlaydigan tip yaratmoqchi bo'lsangiz, Exclude dan foydalanishingiz mumkin:

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

// PhysicalEvent endi "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`${event}ga tashrif buyurish`);
}

// attendPhysicalEvent("webinar"); // Xato: '"webinar"' turidagi argument '"concert" | "conference" | "workshop"' turidagi parametrga tayinlanmaydi.

attendPhysicalEvent("concert"); // To'g'ri

Extract<T, U>

Extract<T, U> T dan U ga tayinlanishi mumkin bo'lgan barcha birlashma a'zolarini ajratib olib, yangi tip yaratadi. Bu Excludening teskarisi.

Misol:

Xuddi shu EventTypedan foydalanib, siz vebinar tadbir turini ajratib olishingiz mumkin:

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

// OnlineEvent endi "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`${event}ga onlayn tashrif buyurish`);
}

attendOnlineEvent("webinar"); // To'g'ri
// attendOnlineEvent("concert"); // Xato: '"concert"' turidagi argument '"webinar"' turidagi parametrga tayinlanmaydi.

NonNullable<T>

NonNullable<T> T dan null va undefinedni chiqarib tashlab, yangi tip yaratadi.

Misol:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString endi string

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

// processString(null); // Xato: 'null' turidagi argument 'string' turidagi parametrga tayinlanmaydi.
// processString(undefined); // Xato: 'undefined' turidagi argument 'string' turidagi parametrga tayinlanmaydi.
processString("hello"); // To'g'ri

ReturnType<T>

ReturnType<T> T funksiyasining qaytaradigan tipidan iborat tip yaratadi.

Misol:

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

type Greeting = ReturnType<typeof greet>;

// Greeting endi string

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

console.log(message);

Parameters<T>

Parameters<T> T funksiya tipining parametrlarining tiplaridan kortej (tuple) tipi yaratadi.

Misol:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Tadbir: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams endi [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters<T>

ConstructorParameters<T> T konstruktor funksiya tipining parametrlarining tiplaridan kortej yoki massiv tipi yaratadi. U klass konstruktoriga uzatilishi kerak bo'lgan argumentlarning tiplarini aniqlaydi.

Misol:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams endi [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Chiqish: Hello, World

Required<T>

Required<T> T ning barcha xususiyatlari majburiy qilib belgilangan tipni yaratadi. U barcha ixtiyoriy xususiyatlarni majburiy qiladi.

Misol:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile endi { name: string; age: number; email: string; }

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

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Xato: '{ name: string; }' tipida 'age' xususiyati yo'q, lekin 'Required' tipida talab qilinadi.

Ilg'or Yordamchi Tiplar

Shablonli Literal Tiplar

Shablonli literal tiplar mavjud satr literal tiplarini, raqam literal tiplarini va boshqalarni birlashtirib, yangi satr literal tiplarini yaratishga imkon beradi. Bu kuchli satrga asoslangan tip manipulyatsiyasini ta'minlaydi.

Misol:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL endi "GET /api/users" | "POST /api/users" | ... va hokazo

function makeRequest(url: RequestURL): void {
  console.log(`${url} ga so'rov yuborilmoqda`);
}

makeRequest("GET /api/users"); // To'g'ri
// makeRequest("INVALID /api/users"); // Xato

Shartli Tiplar

Shartli tiplar tip munosabati sifatida ifodalangan shartga bog'liq bo'lgan tiplarni aniqlashga imkon beradi. Ular tip ma'lumotlarini ajratib olish uchun infer kalit so'zidan foydalanadilar.

Misol:

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

// Agar T Promise bo'lsa, unda tip U bo'ladi; aks holda, tip T bo'ladi.

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


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

// Data endi number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Majburiy
  city?: string; // Ixtiyoriy
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Dastlabki forma qiymatlari (ixtiyoriy maydonlar)
type InitialFormValues = Partial<FormData>;

// Yangilangan forma qiymatlari (ba'zi maydonlar yo'q bo'lishi mumkin)
type UpdatedFormValues = Partial<FormData>;

// Yuborish uchun talab qilinadigan maydonlar
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Ushbu tiplarni forma komponentlaringizda ishlating
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" }; // XATO: 'country' yetishmayapti 
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;
}

// API javobini o'qilishi osonroq formatga o'zgartirish
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));
}


// Siz hatto tipni majburlab qo'llashingiz mumkin:

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; // Turli muhitlar uchun ixtiyoriy API URL
  timeout?: number;  // Ixtiyoriy
}

// Standart sozlamalar
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Foydalanuvchi sozlamalarini standart sozlamalar bilan birlashtirish funksiyasi
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Birlashtirilgan sozlamalarni ilovangizda ishlating
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);