Typy Template Literal: Párování vzorů řetězců a validace v TypeScriptu

Typový systém TypeScriptu se neustále vyvíjí a nabízí vývojářům výkonnější nástroje pro vyjádření složité logiky a zajištění typové bezpečnosti. Jednou z nejzajímavějších a nejvšestrannějších funkcí zavedených v posledních verzích jsou typy template literal. Tyto typy umožňují manipulovat s řetězci na úrovni typů, což umožňuje pokročilé párování vzorů řetězců a jejich validaci. To otevírá zcela nový svět možností pro vytváření robustnějších a udržitelnějších aplikací.

Co jsou typy Template Literal?

Typy template literal jsou formou typů, které jsou konstruovány kombinací typů řetězcových literálů a sjednocených typů (union types), podobně jako fungují template literály v JavaScriptu. Místo vytváření řetězců za běhu však vytvářejí nové typy na základě stávajících.

Zde je základní příklad:

            type Greeting<T extends string> = `Hello, ${T}!`;

type MyGreeting = Greeting<"World">; // type MyGreeting = "Hello, World!"

            

              
                Copy
              
            
          

V tomto příkladu je `Greeting` typ template literal, který přijímá řetězcový typ `T` jako vstup a vrací nový typ, který je zřetězením "Hello, ", `T` a "!".

Základní párování vzorů řetězců

Typy template literal lze použít k provádění základního párování vzorů řetězců. To vám umožňuje vytvářet typy, které jsou platné pouze v případě, že odpovídají určitému vzoru.

Můžete například vytvořit typ, který přijímá pouze řetězce začínající "prefix-":

            type PrefixedString<T extends string> = T extends `prefix-${string}` ? T : never;

type ValidPrefixedString = PrefixedString<"prefix-valid">; // type ValidPrefixedString = "prefix-valid"
type InvalidPrefixedString = PrefixedString<"invalid">; // type InvalidPrefixedString = never

            

              
                Copy
              
            
          

V tomto příkladu `PrefixedString` používá podmínkový typ ke kontrole, zda vstupní řetězec `T` začíná "prefix-". Pokud ano, typem je samotný `T`; v opačném případě je to `never`. `never` je speciální typ v TypeScriptu, který představuje typ hodnot, které nikdy nenastanou, čímž efektivně vylučuje neplatný řetězec.

Extrakce částí řetězce

Typy template literal lze také použít k extrakci částí řetězce. To je obzvláště užitečné, když potřebujete analyzovat data z řetězců a převést je na různé typy.

Řekněme, že máte řetězec, který představuje souřadnici ve formátu "x:10,y:20". Pomocí typů template literal můžete extrahovat hodnoty x a y:

            type CoordinateString = `x:${number},y:${number}`;

type ExtractX<T extends CoordinateString> = T extends `x:${infer X},y:${number}` ? X : never;
type ExtractY<T extends CoordinateString> = T extends `x:${number},y:${infer Y}` ? Y : never;

type XValue = ExtractX<"x:10,y:20">; // type XValue = 10
type YValue = ExtractY<"x:10,y:20">; // type YValue = 20

            

              
                Copy
              
            
          

V tomto příkladu `ExtractX` a `ExtractY` používají klíčové slovo `infer` k zachycení částí řetězce, které odpovídají typu `number`. `infer` umožňuje extrahovat typ z párování vzoru. Zachycené typy se pak použijí jako návratový typ podmínkového typu.

Pokročilá validace řetězců

Typy template literal lze kombinovat s dalšími funkcemi TypeScriptu, jako jsou sjednocené typy (union types) a podmínkové typy, pro provádění pokročilé validace řetězců. To vám umožňuje vytvářet typy, které vynucují složitá pravidla pro strukturu a obsah řetězců.

Můžete například vytvořit typ, který ověřuje řetězce dat ve formátu ISO 8601:

            type Year = `${number}${number}${number}${number}`;
type Month = `0${number}` | `10` | `11` | `12`;
type Day = `${0}${number}` | `${1 | 2}${number}` | `30` | `31`;

type ISODate = `${Year}-${Month}-${Day}`;

type ValidDate = ISODate extends "2023-10-27" ? true : false; // true
type InvalidDate = ISODate extends "2023-13-27" ? true : false; // false

function processDate(date: ISODate) {
  // Function logic here.  TypeScript enforces the ISODate format.
  return `Processing date: ${date}`;
}

console.log(processDate("2024-01-15")); // Works
//console.log(processDate("2024-1-15")); // TypeScript error: Argument of type '"2024-1-15"' is not assignable to parameter of type '`${number}${number}${number}${number}-${0}${number}-${0}${number}` | `${number}${number}${number}${number}-${0}${number}-${1}${number}` | ... 14 more ... | `${number}${number}${number}${number}-12-31`'.

            

              
                Copy
              
            
          

Zde jsou `Year`, `Month` a `Day` definovány pomocí typů template literal pro reprezentaci platných formátů pro každou část data. `ISODate` pak kombinuje tyto typy k vytvoření typu, který představuje platný řetězec data ve formátu ISO 8601. Příklad také ukazuje, jak lze tento typ použít k vynucení formátování dat ve funkci, čímž se zabrání předávání nesprávných formátů dat. To zlepšuje spolehlivost kódu a zabraňuje chybám za běhu způsobeným neplatným vstupem.

Příklady použití v reálném světě

Typy template literal lze použít v různých reálných scénářích. Zde je několik příkladů:

• Validace formulářů: Pomocí typů template literal můžete ověřit formát vstupů formulářů, jako jsou e-mailové adresy, telefonní čísla a PSČ.
• Validace požadavků API: Pomocí typů template literal můžete ověřit strukturu datových částí požadavků API a zajistit, že odpovídají očekávanému formátu. Například ověření kódu měny (např. "USD", "EUR", "GBP").
• Analýza konfiguračních souborů: Pomocí typů template literal můžete analyzovat konfigurační soubory a extrahovat hodnoty na základě specifických vzorů. Zvažte ověření cest k souborům v konfiguračním objektu.
• Výčty založené na řetězcích: Pomocí typů template literal můžete vytvářet výčty (enums) založené na řetězcích s validací.

Příklad: Validace kódů měn

Podívejme se na podrobnější příklad validace kódů měn. Chceme zajistit, aby v naší aplikaci byly používány pouze platné kódy měn ISO 4217. Tyto kódy jsou typicky tři velká písmena.

            type CurrencyCode = `${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}`;

function formatCurrency(amount: number, currency: CurrencyCode) {
  // Function logic to format currency based on the provided code.
  return `$${amount} ${currency}`;
}

console.log(formatCurrency(100, "USD")); // Works
//console.log(formatCurrency(100, "usd")); // TypeScript error: Argument of type '"usd"' is not assignable to parameter of type '`${Uppercase}${Uppercase}${Uppercase}`'.

//More precise example:
type ValidCurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"; // Extend as needed

type StronglyTypedCurrencyCode = ValidCurrencyCode;

function formatCurrencyStronglyTyped(amount: number, currency: StronglyTypedCurrencyCode) {
    return `$${amount} ${currency}`;
}

console.log(formatCurrencyStronglyTyped(100, "EUR")); // Works
//console.log(formatCurrencyStronglyTyped(100, "CNY")); // TypeScript error: Argument of type '"CNY"' is not assignable to parameter of type '"USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"'.

            

              
                Copy
              
            
          

Tento příklad ukazuje, jak vytvořit typ `CurrencyCode`, který přijímá pouze řetězce skládající se ze tří velkých písmen. Druhý, silněji typovaný příklad ukazuje, jak toto dále omezit na předdefinovaný seznam přijatelných měn.

Příklad: Validace cest API endpointů

Dalším případem použití je validace cest API endpointů. Můžete definovat typ, který představuje platnou strukturu API endpointu, což zajišťuje, že požadavky jsou směrovány na správné cesty. To je obzvláště užitečné v architekturách mikroslužeb, kde více služeb může vystavovat různá API.

            type APIServiceName = "users" | "products" | "orders";
type APIEndpointPath = `/${APIServiceName}/${string}`;

function callAPI(path: APIEndpointPath) {
  // API call logic
  console.log(`Calling API: ${path}`);
}

callAPI("/users/123"); // Valid
callAPI("/products/details"); // Valid
//callAPI("/invalid/path"); // TypeScript error

// Even more specific:
type APIAction = "create" | "read" | "update" | "delete";
type APIEndpointPathSpecific = `/${APIServiceName}/${APIAction}`;

function callAPISpecific(path: APIEndpointPathSpecific) {
  // API call logic
  console.log(`Calling specific API: ${path}`);
}

callAPISpecific("/users/create"); // Valid
//callAPISpecific("/users/list"); // TypeScript error

            

              
                Copy
              
            
          

To vám umožňuje přesněji definovat strukturu API endpointů, předcházet překlepům a zajišťovat konzistenci napříč vaší aplikací. Toto je základní příklad; složitější vzory lze vytvořit pro validaci parametrů dotazu a dalších částí URL.

Výhody použití typů Template Literal

Použití typů template literal pro párování vzorů řetězců a validaci nabízí několik výhod:

• Zlepšená typová bezpečnost: Typy template literal vám umožňují vynucovat přísnější typová omezení na řetězce, což snižuje riziko chyb za běhu.
• Vylepšená čitelnost kódu: Typy template literal činí váš kód čitelnějším tím, že jasně vyjadřují očekávaný formát řetězců.
• Zvýšená udržitelnost: Typy template literal činí váš kód udržitelnějším tím, že poskytují jediný zdroj pravdy pro pravidla validace řetězců.
• Lepší vývojářská zkušenost: Typy template literal poskytují lepší automatické doplňování a chybové zprávy, čímž zlepšují celkovou vývojářskou zkušenost.

Omezení

Ačkoli jsou typy template literal výkonné, mají také některá omezení:

• Složitost: Typy template literal se mohou stát složitými, zejména při práci se složitými vzory. Je klíčové vyvážit výhody typové bezpečnosti s udržitelností kódu.
• Výkon: Typy template literal mohou ovlivnit výkon kompilace, zejména ve velkých projektech. To proto, že TypeScript musí provádět složitější kontrolu typů.
• Omezená podpora regulárních výrazů: I když typy template literal umožňují párování vzorů, nepodporují celou škálu funkcí regulárních výrazů. Pro vysoce komplexní validaci řetězců mohou být stále potřeba regulární výrazy za běhu (runtime) vedle těchto typových konstruktů pro správné sanitizaci vstupu.

Nejlepší postupy

Zde jsou některé osvědčené postupy, které je třeba mít na paměti při používání typů template literal:

• Začněte jednoduše: Začněte s jednoduchými vzory a postupně zvyšujte složitost podle potřeby.
• Používejte popisné názvy: Používejte popisné názvy pro své typy template literal ke zlepšení čitelnosti kódu.
• Dokumentujte své typy: Dokumentujte své typy template literal, abyste vysvětlili jejich účel a použití.
• Důkladně testujte: Důkladně testujte své typy template literal, abyste se ujistili, že se chovají podle očekávání.
• Zvažte výkon: Dbejte na dopad typů template literal na výkon kompilace a optimalizujte svůj kód odpovídajícím způsobem.

Závěr

Typy template literal jsou výkonná funkce v TypeScriptu, která umožňuje provádět pokročilou manipulaci s řetězci, párování vzorů a validaci na úrovni typů. Používáním typů template literal můžete vytvářet robustnější, udržitelnější a typově bezpečnější aplikace. Ačkoli mají některá omezení, výhody používání typů template literal často převyšují nevýhody, což z nich činí cenný nástroj v arzenálu každého vývojáře TypeScriptu. Jak se jazyk TypeScript neustále vyvíjí, porozumění a využívání těchto pokročilých typových funkcí bude klíčové pro vytváření vysoce kvalitního softwaru. Nezapomeňte vyvážit složitost s čitelností a vždy upřednostňujte důkladné testování.