TypeScript Ilg'or Turlari: Template Literal va Conditional Turlarni O'zlashtirish

Xalqaro Misol: Turli Sana Formatlarini Boshqarish

Dunyoning turli mintaqalari turli sana formatlaridan foydalanadi. Ushbu farqlarni boshqarish uchun conditional tiplardan foydalanishingiz mumkin.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate<T extends DateFormat> = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate<T extends DateFormat>(dateString: string, format: T): ParseDate<T> {
  // (Implementation would handle different date formats)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate<T>;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate<T>;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate<T>;
  } else {
    throw new Error("Invalid date format");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Access the year knowing it will be there

Ushbu misol ko'rsatilgan sana formatiga asoslanib turli sana tahlil qilish funksiyalarini aniqlash uchun conditional tiplardan foydalanadi. ParseDate<T> tipi qaytarilgan obyektning formatga asoslanib to'g'ri xususiyatlarga ega bo'lishini ta'minlaydi.

Template Literal va Conditional Tiplarni Birlashtirish

Haqiqiy kuch template literal tiplari va conditional tiplarni birlashtirganda yuzaga keladi. Bu nihoyatda kuchli tip manipulyatsiyalariga imkon beradi.

type EventName<T extends string> = `on${Capitalize<T>}`;

type ExtractEventPayload<T extends string> = T extends EventName<infer E>
  ? { type: T; payload: any }  // Simplified for demonstration
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Example function that takes a type
function processEvent<T extends string>(event: T): ExtractEventPayload<T> {
    //In a real implementation, we would actually dispatch the event.
    console.log(`Processing event ${event}`);

    //In a real implementation, the payload would be based on event type.
    return { type: event, payload: {} } as ExtractEventPayload<T>;
}

//Note that the return types are very specific:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//If you use other strings, you get never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`

Eng Yaxshi Amaliyotlar va E'tiborga Loyiq Jihatlar

• Sodda Tutish: Garchi kuchli bo'lsa-da, bu ilg'or tiplar tezda murakkablashishi mumkin. Aniq va xizmat ko'rsatish oson bo'lishga intiling.
• Puxta Sinash: Keng qamrovli unit testlar yozish orqali tip ta'riflaringiz kutilganidek ishlashiga ishonch hosil qiling.
• Kodingizni Hujjatlashtirish: Kodingizni o'qilishi mumkinligini oshirish uchun ilg'or tiplaringizning maqsadini va xulqini aniq hujjatlashtiring.
• Ishlashga E'tibor Berish: Ilg'or tiplardan haddan tashqari foydalanish kompilyatsiya vaqtiga ta'sir qilishi mumkin. Kodingizni profillang va kerak bo'lganda optimallashtiring.