Napredni tipovi u TypeScriptu: Svladavanje predložaka literalnih i uvjetnih tipova

Međunarodni primjer: Rukovanje različitim formatima datuma

Različite regije svijeta koriste različite formate datuma. Možete koristiti uvjetne tipove za rukovanje tim varijacijama.

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

type ParseDate = 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(dateString: string, format: T): ParseDate {
  // (Implementacija bi rukovala različitim formatima datuma)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Nevaljan format datuma");
  }
}

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


console.log(parsedDateISO.year); // Pristupite godini znajući da će tamo biti

Ovaj primjer koristi uvjetne tipove za definiranje različitih funkcija raščlanjivanja datuma na temelju navedenog formata datuma. Tip ParseDate osigurava da vraćeni objekt ima ispravna svojstva na temelju formata.

Kombiniranje predložaka literalnih i uvjetnih tipova

Prava snaga dolazi kada kombinirate predloške literalnih i uvjetnih tipova. Ovo omogućuje nevjerojatno moćne manipulacije tipovima.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName ? { type: T; payload: any } : never;


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

// Primjer funkcije koja uzima tip
function processEvent(event: T): ExtractEventPayload {
    // U stvarnoj implementaciji bismo zapravo poslali događaj.
    console.log(`Obrada događaja ${event}`);

    // U stvarnoj implementaciji, payload bi se temeljio na tipu događaja.
    return { type: event, payload: {} } as ExtractEventPayload;
}

// Napominjemo da su povratni tipovi vrlo specifični:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

// Ako koristite druge nizove, dobivate `never`:
// const someOtherEvent = processEvent("someOtherEvent"); // Tip je `never`

Najbolje prakse i razmatranja

• Neka bude jednostavno: Iako moćni, ovi napredni tipovi mogu brzo postati složeni. Težite jasnoći i održivosti.
• Temeljito testirajte: Osigurajte da vaše definicije tipova rade očekivano pišući sveobuhvatne jedinice testova.
• Dokumentirajte svoj kod: Jasno dokumentirajte svrhu i ponašanje vaših naprednih tipova kako biste poboljšali čitljivost koda.
• Razmotrite performanse: Prekomjerna upotreba naprednih tipova može utjecati na vrijeme kompilacije. Profilirajte svoj kod i optimizirajte gdje je potrebno.