Template Literal-typer: Strängmönstermatchning och validering i TypeScript

TypeScripts typsystem utvecklas ständigt och erbjuder utvecklare allt kraftfullare verktyg för att uttrycka komplex logik och säkerställa typsäkerhet. En av de mest intressanta och mångsidiga funktionerna som introducerats i de senaste versionerna är template literal-typer. Dessa typer låter dig manipulera strängar på typnivå, vilket möjliggör avancerad strängmönstermatchning och validering. Detta öppnar upp en helt ny värld av möjligheter för att skapa mer robusta och underhållbara applikationer.

Vad är Template Literal-typer?

Template literal-typer är en form av typ som konstrueras genom att kombinera strängliteral-typer och union-typer, liknande hur template literals fungerar i JavaScript. Men istället för att skapa strängar vid körtid skapar de nya typer baserade på befintliga.

Här är ett grundläggande exempel:

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

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

            

              
                Copy
              
            
          

I det här exemplet är `Greeting` en template literal-typ som tar en strängtyp `T` som indata och returnerar en ny typ som är en sammanfogning av "Hello, ", `T` och "!".

Grundläggande strängmönstermatchning

Template literal-typer kan användas för att utföra grundläggande strängmönstermatchning. Detta låter dig skapa typer som endast är giltiga om de matchar ett visst mönster.

Till exempel kan du skapa en typ som endast accepterar strängar som börjar med "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
              
            
          

I det här exemplet använder `PrefixedString` en villkorlig typ för att kontrollera om indatasträngen `T` börjar med "prefix-". Om den gör det är typen `T` själv; annars är den `never`. `never` är en speciell typ i TypeScript som representerar typen av värden som aldrig förekommer, vilket effektivt utesluter den ogiltiga strängen.

Extrahera delar av en sträng

Template literal-typer kan också användas för att extrahera delar av en sträng. Detta är särskilt användbart när du behöver tolka data från strängar och konvertera det till olika typer.

Anta att du har en sträng som representerar en koordinat i formatet "x:10,y:20". Du kan använda template literal-typer för att extrahera x- och y-värdena:

            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
              
            
          

I det här exemplet använder `ExtractX` och `ExtractY` nyckelordet `infer` för att fånga de delar av strängen som matchar typen `number`. `infer` låter dig extrahera en typ från en mönstermatchning. De infångade typerna används sedan som returtyp för den villkorliga typen.

Avancerad strängvalidering

Template literal-typer kan kombineras med andra TypeScript-funktioner, såsom union-typer och villkorliga typer, för att utföra avancerad strängvalidering. Detta låter dig skapa typer som upprätthåller komplexa regler för strängars struktur och innehåll.

Till exempel kan du skapa en typ som validerar ISO 8601-datumsträngar:

            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) {
  // Funktionslogik här. TypeScript upprätthåller ISODate-formatet.
  return `Processing date: ${date}`;
}

console.log(processDate("2024-01-15")); // Fungerar
//console.log(processDate("2024-1-15")); // TypeScript-fel: Argumentet av typen '"2024-1-15"' kan inte tilldelas till parametern av typen '`${number}${number}${number}${number}-${0}${number}-${0}${number}` | `${number}${number}${number}${number}-${0}${number}-${1}${number}` | ... 14 till ... | `${number}${number}${number}${number}-12-31`'.

            

              
                Copy
              
            
          

Här definieras `Year`, `Month` och `Day` med hjälp av template literal-typer för att representera de giltiga formaten för varje del av datumet. `ISODate` kombinerar sedan dessa typer för att skapa en typ som representerar en giltig ISO 8601-datumsträng. Exemplet visar också hur denna typ kan användas för att upprätthålla dataformatering i en funktion, vilket förhindrar att felaktiga datumformat skickas in. Detta förbättrar kodens tillförlitlighet och förhindrar körtidsfel orsakade av ogiltig indata.

Verkliga användningsfall

Template literal-typer kan användas i en mängd olika verkliga scenarier. Här är några exempel:

• Formulärvalidering: Du kan använda template literal-typer för att validera formatet på formulärindata, såsom e-postadresser, telefonnummer och postnummer.
• Validering av API-anrop: Du kan använda template literal-typer för att validera strukturen på nyttolaster i API-anrop, och säkerställa att de överensstämmer med det förväntade formatet. Till exempel validering av en valutakod (t.ex. "USD", "EUR", "GBP").
• Tolkning av konfigurationsfiler: Du kan använda template literal-typer för att tolka konfigurationsfiler och extrahera värden baserat på specifika mönster. Tänk på att validera filsökvägar i ett konfigurationsobjekt.
• Strängbaserade enums: Du kan skapa strängbaserade enums med validering med hjälp av template literal-typer.

Exempel: Validering av valutakoder

Låt oss titta på ett mer detaljerat exempel på validering av valutakoder. Vi vill säkerställa att endast giltiga ISO 4217-valutakoder används i vår applikation. Dessa koder består vanligtvis av tre versaler.

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

function formatCurrency(amount: number, currency: CurrencyCode) {
  // Funktionslogik för att formatera valuta baserat på den angivna koden.
  return `$${amount} ${currency}`;
}

console.log(formatCurrency(100, "USD")); // Fungerar
//console.log(formatCurrency(100, "usd")); // TypeScript-fel: Argumentet av typen '"usd"' kan inte tilldelas till parametern av typen '`${Uppercase}${Uppercase}${Uppercase}`'.

//Mer exakt exempel:
type ValidCurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"; // Utöka vid behov

type StronglyTypedCurrencyCode = ValidCurrencyCode;

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

console.log(formatCurrencyStronglyTyped(100, "EUR")); // Fungerar
//console.log(formatCurrencyStronglyTyped(100, "CNY")); // TypeScript-fel: Argumentet av typen '"CNY"' kan inte tilldelas till parametern av typen '"USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"'.

            

              
                Copy
              
            
          

Detta exempel visar hur man skapar en `CurrencyCode`-typ som endast accepterar strängar bestående av tre versaler. Det andra, mer starkt typade exemplet visar hur man kan begränsa detta ytterligare till en fördefinierad lista av godkända valutor.

Exempel: Validering av API-ändpunktssökvägar

Ett annat användningsfall är validering av API-ändpunktssökvägar. Du kan definiera en typ som representerar en giltig API-ändpunktsstruktur, vilket säkerställer att anrop görs till korrekta sökvägar. Detta är särskilt användbart i mikroservicearkitekturer där flera tjänster kan exponera olika API:er.

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

function callAPI(path: APIEndpointPath) {
  // Logik för API-anrop
  console.log(`Calling API: ${path}`);
}

callAPI("/users/123"); // Giltig
callAPI("/products/details"); // Giltig
//callAPI("/invalid/path"); // TypeScript-fel

// Ännu mer specifik:
type APIAction = "create" | "read" | "update" | "delete";
type APIEndpointPathSpecific = `/${APIServiceName}/${APIAction}`;

function callAPISpecific(path: APIEndpointPathSpecific) {
  // Logik för API-anrop
  console.log(`Calling specific API: ${path}`);
}

callAPISpecific("/users/create"); // Giltig
//callAPISpecific("/users/list"); // TypeScript-fel

            

              
                Copy
              
            
          

Detta gör att du kan definiera strukturen för API-ändpunkter mer exakt, vilket förhindrar stavfel och säkerställer konsekvens i hela din applikation. Detta är ett grundläggande exempel; mer komplexa mönster kan skapas för att validera frågeparametrar och andra delar av URL:en.

Fördelar med att använda Template Literal-typer

Att använda template literal-typer för strängmönstermatchning och validering erbjuder flera fördelar:

• Förbättrad typsäkerhet: Template literal-typer låter dig upprätthålla striktare typbegränsningar på strängar, vilket minskar risken för körtidsfel.
• Ökad läsbarhet i koden: Template literal-typer gör din kod mer läsbar genom att tydligt uttrycka det förväntade formatet på strängar.
• Ökad underhållbarhet: Template literal-typer gör din kod mer underhållbar genom att tillhandahålla en enda sanningskälla för strängvalideringsregler.
• Bättre utvecklarupplevelse: Template literal-typer ger bättre autofyll och felmeddelanden, vilket förbättrar den övergripande utvecklarupplevelsen.

Begränsningar

Även om template literal-typer är kraftfulla har de också vissa begränsningar:

• Komplexitet: Template literal-typer kan bli komplexa, särskilt när man hanterar invecklade mönster. Det är avgörande att balansera fördelarna med typsäkerhet mot kodens underhållbarhet.
• Prestanda: Template literal-typer kan påverka kompileringsprestandan, särskilt i stora projekt. Detta beror på att TypeScript behöver utföra mer komplex typkontroll.
• Begränsat stöd för reguljära uttryck: Även om template literal-typer möjliggör mönstermatchning, stöder de inte hela utbudet av funktioner i reguljära uttryck. För mycket komplex strängvalidering kan reguljära uttryck vid körtid fortfarande behövas vid sidan av dessa typkonstruktioner för korrekt indatasanering.

Bästa praxis

Här är några bästa praxis att tänka på när du använder template literal-typer:

• Börja enkelt: Börja med enkla mönster och öka gradvis komplexiteten vid behov.
• Använd beskrivande namn: Använd beskrivande namn för dina template literal-typer för att förbättra kodens läsbarhet.
• Dokumentera dina typer: Dokumentera dina template literal-typer för att förklara deras syfte och användning.
• Testa noggrant: Testa dina template literal-typer noggrant för att säkerställa att de fungerar som förväntat.
• Tänk på prestandan: Var medveten om inverkan av template literal-typer på kompileringsprestandan och optimera din kod därefter.

Slutsats

Template literal-typer är en kraftfull funktion i TypeScript som låter dig utföra avancerad strängmanipulation, mönstermatchning och validering på typnivå. Genom att använda template literal-typer kan du skapa mer robusta, underhållbara och typsäkra applikationer. Även om de har vissa begränsningar väger fördelarna med att använda template literal-typer ofta tyngre än nackdelarna, vilket gör dem till ett värdefullt verktyg i varje TypeScript-utvecklares arsenal. I takt med att TypeScript-språket fortsätter att utvecklas kommer det att vara avgörande att förstå och använda dessa avancerade typfunktioner för att bygga högkvalitativ programvara. Kom ihåg att balansera komplexitet med läsbarhet och att alltid prioritera noggrann testning.