TypeScript šabloninių literalių tipai tipams saugioms API sąsajoms

TypeScript šabloninių literalių tipai yra galinga funkcija, pristatyta TypeScript 4.1 versijoje, leidžianti atlikti eilutės manipuliacijas tipų lygmenyje. Jie atveria daugybę galimybių kurti itin tipams saugias ir lengvai prižiūrimas API sąsajas, leidžiančias aptikti klaidas kompiliavimo metu, kurios kitu atveju išryškėtų tik vykdymo metu. Tai savo ruožtu pagerina programuotojų patirtį, palengvina refaktorinimą ir užtikrina patikimesnį kodą.

Kas yra šabloninių literalių tipai?

Iš esmės šabloninių literalių tipai yra eilutės literalių tipai, kuriuos galima sukurti derinant eilutės literalių tipus, jungtinius tipus ir tipų kintamuosius. Galima juos įsivaizduoti kaip eilučių interpoliaciją tipams. Tai leidžia kurti naujus tipus remiantis esamais, suteikiant didelį lankstumą ir išraiškingumą.

Štai paprastas pavyzdys:

type Greeting = "Hello, World!";

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

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

Šiame pavyzdyje PersonalizedGreeting yra šabloninio literalo tipas, kuris priima bendrinį tipo parametrą T, kuris turi būti eilutė. Tada jis sukuria naują tipą, interpoliuodamas eilutės literalą "Hello, " su T reikšme ir eilutės literalu "!". Gautas tipas, MyGreeting, yra "Hello, Alice!".

Šabloninių literalių tipų naudojimo privalumai

• Padidintas tipų saugumas: Klaidos aptinkamos kompiliavimo, o ne vykdymo metu.
• Geresnis kodo prižiūrimumas: Jūsų kodą tampa lengviau suprasti, keisti ir refaktorinti.
• Geresnė programuotojo patirtis: Suteikia tikslesnį ir naudingesnį automatinį užbaigimą bei klaidų pranešimus.
• Kodo generavimas: Leidžia kurti kodo generatorius, kurie gamina tipams saugų kodą.
• API projektavimas: Užtikrina API naudojimo apribojimus ir supaprastina parametrų apdorojimą.

Realūs panaudojimo atvejai

1. API galinių taškų apibrėžimas

Šabloninių literalių tipai gali būti naudojami apibrėžti API galinių taškų tipus, užtikrinant, kad API būtų perduodami teisingi parametrai ir kad atsakymas būtų apdorojamas teisingai. Pavyzdžiui, el. prekybos platforma, palaikanti kelias valiutas, tokias kaip USD, EUR ir JPY.

type Currency = "USD" | "EUR" | "JPY";
type ProductID = string; //In practice, this could be a more specific type

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

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

Šis pavyzdys apibrėžia GetProductEndpoint tipą, kuris priima valiutą kaip tipo parametrą. Gautas tipas yra eilutės literalo tipas, kuris atspindi API galinį tašką, skirtą gauti produktą nurodyta valiuta. Naudojant šį metodą, galite užtikrinti, kad API galinis taškas visada būtų sukonstruotas teisingai ir kad būtų naudojama teisinga valiuta.

2. Duomenų validavimas

Šabloninių literalių tipai gali būti naudojami duomenų validavimui kompiliavimo metu. Pavyzdžiui, juos galima naudoti telefono numerio ar el. pašto adreso formatui patikrinti. Įsivaizduokite, kad reikia patikrinti tarptautinius telefono numerius, kurie gali turėti skirtingus formatus priklausomai nuo šalies kodo.

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

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

//Pastaba: Sudėtingesniam validavimui gali prireikti derinti šabloninių literalių tipus su sąlyginiais tipais.

Šis pavyzdys rodo, kaip galėtumėte sukurti pagrindinį telefono numerio tipą, kuris užtikrina konkretų formatą. Sudėtingesnis validavimas galėtų apimti sąlyginių tipų ir reguliariųjų išraiškų panašių šablonų naudojimą šabloninio literalo viduje.

3. Kodo generavimas

Šabloninių literalių tipai gali būti naudojami generuoti kodą kompiliavimo metu. Pavyzdžiui, juos galima naudoti React komponentų pavadinimams generuoti, remiantis duomenų, kuriuos jie atvaizduoja, pavadinimu. Dažnas modelis yra komponentų pavadinimų generavimas pagal <Esybė>Details šabloną.

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

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

Tai leidžia automatiškai generuoti komponentų pavadinimus, kurie yra nuoseklūs ir aprašomieji, mažinant pavadinimų konfliktų riziką ir gerinant kodo skaitomumą.

4. Įvykių apdorojimas

Šabloninių literalių tipai puikiai tinka įvykių pavadinimams apibrėžti tipams saugiu būdu, užtikrinant, kad įvykių klausytojai būtų teisingai užregistruoti ir kad įvykių apdorojimo funkcijos gautų laukiamus duomenis. Įsivaizduokite sistemą, kurioje įvykiai yra suskirstyti pagal modulį ir įvykio tipą, atskirtus dvitaškiu.

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; //Pavyzdys: Tipas įvykių apdorojimui
}

Šis pavyzdys parodo, kaip sukurti įvykių pavadinimus, kurie atitinka nuoseklų modelį, gerinant bendrą įvykių sistemos struktūrą ir tipų saugumą.

Pažangios technikos

1. Derinimas su sąlyginiais tipais

Šabloninių literalių tipai gali būti derinami su sąlyginiais tipais, siekiant sukurti dar sudėtingesnes tipų transformacijas. Sąlyginiai tipai leidžia apibrėžti tipus, kurie priklauso nuo kitų tipų, leidžiant atlikti sudėtingą logiką tipų lygmenyje.

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"