TypeScript predložni literalni tipovi za tipski sigurne API-je

TypeScript predložni literalni tipovi moćna su značajka uvedena u TypeScript 4.1 koja vam omogućuje manipulaciju stringovima na razini tipa. Otvaraju svijet mogućnosti za stvaranje visoko tipski sigurnih i održivih API-ja, omogućujući vam da uhvatite pogreške u vrijeme kompajliranja koje bi se inače pojavile tek u vrijeme izvođenja. To, zauzvrat, dovodi do poboljšanog iskustva programera, lakšeg refaktoriranja i robusnijeg koda.

Što su predložni literalni tipovi?

U svojoj suštini, predložni literalni tipovi su tipovi string literala koji se mogu konstruirati kombiniranjem tipova string literala, unijskih tipova i varijabli tipa. Zamislite ih kao interpolaciju stringova za tipove. To vam omogućuje stvaranje novih tipova na temelju postojećih, pružajući visok stupanj fleksibilnosti i izražajnosti.

Evo jednostavnog primjera:

type Greeting = "Hello, World!";

type PersonalizedGreeting = `Hello, ${T}!`;

type MyGreeting = PersonalizedGreeting<"Alice">; // type MyGreeting = "Hello, Alice!"

U ovom primjeru, PersonalizedGreeting je predložni literalni tip koji uzima generički parametar tipa T, koji mora biti string. Zatim konstruira novi tip interpolacijom string literala "Hello, " s vrijednošću T i string literala "!". Rezultirajući tip, MyGreeting, je "Hello, Alice!".

Prednosti korištenja predložnih literalnih tipova

• Poboljšana tipska sigurnost: Uhvatite pogreške u vrijeme kompajliranja umjesto u vrijeme izvođenja.
• Poboljšana održivost koda: Čini vaš kod lakšim za razumijevanje, izmjenu i refaktoriranje.
• Bolje iskustvo programera: Pruža preciznije i korisnije samodovršavanje i poruke o pogreškama.
• Generiranje koda: Omogućuje stvaranje generatora koda koji proizvode tipski siguran kod.
• Dizajn API-ja: Nameće ograničenja na korištenje API-ja i pojednostavljuje rukovanje parametrima.

Primjeri iz stvarnog svijeta

1. Definicija API krajnjih točaka

Predložni literalni tipovi mogu se koristiti za definiranje tipova API krajnjih točaka, osiguravajući da se ispravni parametri prosljeđuju API-ju i da se odgovor ispravno obrađuje. Razmotrite platformu za e-trgovinu koja podržava više valuta, poput USD, EUR i JPY.

type Currency = "USD" | "EUR" | "JPY";
type ProductID = string; //U praksi bi ovo mogao biti specifičniji tip

type GetProductEndpoint = `/products/${ProductID}/${C}`;

type USDEndpoint = GetProductEndpoint<"USD">; // type USDEndpoint = "/products/${string}/USD"

Ovaj primjer definira tip GetProductEndpoint koji kao parametar tipa uzima valutu. Rezultirajući tip je tip string literala koji predstavlja API krajnju točku za dohvaćanje proizvoda u navedenoj valuti. Korištenjem ovog pristupa možete osigurati da je API krajnja točka uvijek ispravno konstruirana i da se koristi ispravna valuta.

2. Validacija podataka

Predložni literalni tipovi mogu se koristiti za validaciju podataka u vrijeme kompajliranja. Na primjer, mogli biste ih koristiti za provjeru formata telefonskog broja ili e-mail adrese. Zamislite da trebate provjeriti međunarodne telefonske brojeve koji mogu imati različite formate ovisno o pozivnom broju zemlje.

type CountryCode = "+1" | "+44" | "+81"; // SAD, UK, Japan
type PhoneNumber = `${C}-${N}`;

type ValidUSPhoneNumber = PhoneNumber<"+1", "555-123-4567">; // type ValidUSPhoneNumber = "+1-555-123-4567"

//Napomena: Složenija validacija može zahtijevati kombiniranje predložnih literalnih tipova s uvjetnim tipovima.

Ovaj primjer pokazuje kako možete stvoriti osnovni tip telefonskog broja koji nameće određeni format. Sofisticiranija validacija mogla bi uključivati korištenje uvjetnih tipova i uzoraka sličnih regularnim izrazima unutar predložnog literala.

3. Generiranje koda

Predložni literalni tipovi mogu se koristiti za generiranje koda u vrijeme kompajliranja. Na primjer, mogli biste ih koristiti za generiranje naziva React komponenata na temelju naziva podataka koje prikazuju. Uobičajen uzorak je generiranje naziva komponenata prema predlošku <Entitet>Detalji.

type Entity = "User" | "Product" | "Order";
type ComponentName = `${E}Details`;

type UserDetailsComponent = ComponentName<"User">; // type UserDetailsComponent = "UserDetails"

To vam omogućuje automatsko generiranje naziva komponenata koji su dosljedni i opisni, smanjujući rizik od sukoba imena i poboljšavajući čitljivost koda.

4. Rukovanje događajima

Predložni literalni tipovi izvrsni su za definiranje naziva događaja na tipski siguran način, osiguravajući da su slušači događaja ispravno registrirani i da rukovatelji događajima primaju očekivane podatke. Razmotrite sustav u kojem su događaji kategorizirani po modulu i vrsti događaja, odvojeni dvotočkom.

type Module = "user" | "product" | "order";
type EventType = "created" | "updated" | "deleted";
type EventName = `${M}:${E}`;

type UserCreatedEvent = EventName<"user", "created">; // type UserCreatedEvent = "user:created"

interface EventMap {
  [key: EventName]: (data: any) => void; //Primjer: Tip za rukovanje događajima
}

Ovaj primjer pokazuje kako stvoriti nazive događaja koji slijede dosljedan obrazac, poboljšavajući cjelokupnu strukturu i tipsku sigurnost sustava događaja.

Napredne tehnike

1. Kombiniranje s uvjetnim tipovima

Predložni literalni tipovi mogu se kombinirati s uvjetnim tipovima kako bi se stvorile još sofisticiranije transformacije tipova. Uvjetni tipovi omogućuju vam definiranje tipova koji ovise o drugim tipovima, omogućujući vam izvođenje složene logike na razini tipa.

type ToUpperCase = S extends Uppercase ? S : Uppercase;

type MaybeUpperCase = Upper extends true ? ToUpperCase : S;

type Example = MaybeUpperCase<"hello", true>; // type Example = "HELLO"
type Example2 = MaybeUpperCase<"world", false>; // type Example2 = "world"

type MyObject = {
  name: string;
  age: number;
};

type AddPrefix = {
  [K in keyof T as `${Prefix}${string & K}`]: T[K];
};

type PrefixedObject = AddPrefix;
// type PrefixedObject = {
//    data_name: string;
//    data_age: number;
// }

type MyString = "hello world";

type CapitalizedString = Capitalize; // type CapitalizedString = "Hello world"

type UpperCasedString = Uppercase;   // type UpperCasedString = "HELLO WORLD"