Parsning av TypeScript Template Literals: Avancerad manipulering av strängtyper

            type Color = "red" | "green" | "blue";
type Shade = "light" | "dark";

type ColorCombination = `${Shade} ${Color}`;

// ColorCombination är nu "light red" | "light green" | "light blue" | "dark red" | "dark green" | "dark blue"

            

              
                Copy
              
            
          

            type Greeting = `Hello, ${string}!`;

// Exempelanvändning
const greet = (name: string): Greeting => `Hello, ${name}!`;

const message: Greeting = greet("World"); // Giltig
const invalidMessage: Greeting = "Goodbye, World!"; // Fel: Typen '"Goodbye, World!"' kan inte tilldelas typen '`Hello, ${string}!`'.

            

              
                Copy
              
            
          

            type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type Endpoint = `/api/users` | `/api/products`;

type Route = `${HTTPMethod} ${Endpoint}`;

// Route är nu "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

            

              
                Copy
              
            
          

            type GetFileExtension = T extends `${string}.${infer Extension}` ? Extension : never;

// Exempel
type Extension1 = GetFileExtension<"myFile.txt">; // "txt"
type Extension2 = GetFileExtension<"anotherFile.image.jpg">; // "image.jpg" (tar den sista ändelsen)
type Extension3 = GetFileExtension<"noExtension">; // never

            

              
                Copy
              
            
          

            type ParseConnectionString = 
  T extends `${infer Protocol}://${infer Host}:${infer Port}` ?
    { protocol: Protocol, host: Host, port: Port } : never;

// Exempel
type Connection = ParseConnectionString<"http://localhost:3000">; 
// { protocol: "http", host: "localhost", port: "3000" }

type InvalidConnection = ParseConnectionString<"invalid-connection">; // never

            

              
                Copy
              
            
          

Denna typ parsar en anslutningssträng till dess komponenter: protokoll, värd och port.

Rekursiva typdefinitioner för komplex parsning

För mer komplexa strängstrukturer kan du använda rekursiva typdefinitioner. Detta låter dig upprepade gånger parsa delar av en strängtyp tills du når ett önskat resultat.

Låt oss säga att du vill dela upp en sträng i en array av enskilda tecken på typnivå. Detta är betydligt mer avancerat.

            type StringToArray = 
  T extends `${infer Char}${infer Rest}`
    ? StringToArray
    : Acc;

// Exempel
type MyArray = StringToArray<"hello">; // ["h", "e", "l", "l", "o"]

            

              
                Copy
              
            
          

Förklaring:

• StringToArray<T extends string, Acc extends string[] = []>: Detta definierar en generisk typ med namnet StringToArray som tar en strängtyp T som indata och en valfri ackumulator Acc som standard är en tom strängarray. Ackumulatorn kommer att lagra tecknen medan vi bearbetar dem.
• T extends `${infer Char}${infer Rest}`: Detta är den villkorliga typkontrollen. Den kontrollerar om indatasträngen T kan delas upp i ett första tecken Char och den återstående strängen Rest. Nyckelordet infer används för att fånga dessa delar.
• StringToArray<Rest, [...Acc, Char]>: Om uppdelningen lyckas, anropar vi rekursivt StringToArray med Rest av strängen och en ny ackumulator. Den nya ackumulatorn skapas genom att sprida den befintliga Acc och lägga till det nuvarande tecknet Char i slutet. Detta lägger effektivt till tecknet i den ackumulerande arrayen.
• Acc: Om strängen är tom (den villkorliga typen misslyckas, vilket betyder att det inte finns fler tecken), returnerar vi den ackumulerade arrayen Acc.

Detta exempel demonstrerar kraften i rekursion för att manipulera strängtyper. Varje rekursivt anrop skalar av ett tecken och lägger till det i arrayen tills strängen är tom.

Arbeta med avgränsare

Template literals kan enkelt användas med avgränsare för att parsa strängar. Låt oss säga att du vill extrahera ord som är separerade med kommatecken.

            type SplitString = 
  T extends `${infer First}${D}${infer Rest}`
    ? [First, ...SplitString]
    : [T];

// Exempel
type Words = SplitString<"apple,banana,cherry", ",">; // ["apple", "banana", "cherry"]

            

              
                Copy
              
            
          

Denna typ delar rekursivt upp strängen vid varje förekomst av avgränsaren D.

Praktiska tillämpningar

Dessa avancerade tekniker för parsning av template literals har många praktiska tillämpningar i TypeScript-projekt.

Datavalidering

Du kan validera strängbaserad data mot specifika mönster vid kompileringstid. Till exempel validering av e-postadresser, telefonnummer eller kreditkortsnummer. Detta tillvägagångssätt ger tidig återkoppling och minskar körtidsfel.

Här är ett exempel på validering av ett förenklat e-postadressformat:

            type EmailFormat = `${string}@${string}.${string}`;

const validateEmail = (email: string): email is EmailFormat => {
  // I verkligheten skulle ett mycket mer komplext regex användas för korrekt e-postvalidering.
  // Detta är endast i demonstrationssyfte.
  return /.+@.+\..+/.test(email);
}

const validEmail: EmailFormat = "user@example.com"; // Giltig
const invalidEmail: EmailFormat = "invalid-email"; // Typen 'string' kan inte tilldelas typen '`${string}@${string}.${string}`'.

if(validateEmail(validEmail)) {
    console.log("Giltig e-post");
}

if(validateEmail("invalid-email")) {
  console.log("Detta kommer inte att skrivas ut.");
}

            

              
                Copy
              
            
          

Även om körtidsvalidering med ett regex fortfarande är nödvändigt i fall där typkontrollen inte helt kan upprätthålla begränsningen (t.ex. vid hantering av extern indata), ger EmailFormat-typen ett värdefullt första försvarslinje vid kompileringstid.

Generering av API-slutpunkter

Template literals kan användas för att generera typer för API-slutpunkter baserat på en bas-URL och en uppsättning parametrar. Detta kan hjälpa till att säkerställa konsekvens och typsäkerhet när man arbetar med API:er.

            type BaseURL = "https://api.example.com";
type Resource = "users" | "products";
type ID = string | number;

type GetEndpoint = `${BaseURL}/${T}/${U}`;

// Exempel
type UserEndpoint = GetEndpoint<"users", 123>; // "https://api.example.com/users/123"
type ProductEndpoint = GetEndpoint<"products", "abc-456">; // "https://api.example.com/products/abc-456"

            

              
                Copy
              
            
          

Kodgenerering

I mer avancerade scenarier kan template literal-typer användas som en del av kodgenereringsprocesser. Till exempel för att generera SQL-frågor baserat på ett schema eller skapa UI-komponenter baserat på en konfigurationsfil.

Internationalisering (i18n)

Template literals kan vara värdefulla i i18n-scenarier. Tänk dig till exempel ett system där översättningsnycklar följer en specifik namngivningskonvention:

            type SupportedLanguages = 'en' | 'es' | 'fr';
type TranslationKeyPrefix = 'common' | 'product' | 'checkout';

type TranslationKey = `${TPrefix}.${string}`;

// Exempelanvändning:
const getTranslation = (key: TranslationKey, lang: SupportedLanguages): string => {
  // Simulera hämtning av översättningen från en resursbunt baserat på nyckel och språk
  const translations: Record> = {
    'common.greeting': {
      en: 'Hello',
      es: 'Hola',
      fr: 'Bonjour',
    },
    'product.description': {
      en: 'A fantastic product!',
      es: '¡Un producto fantástico!',
      fr: 'Un produit fantastique !',
    },
  };

  const translation = translations[key]?.[lang];
  return translation || `Translation not found for key: ${key} in language: ${lang}`;
};

const englishGreeting = getTranslation('common.greeting', 'en'); // Hello
const spanishDescription = getTranslation('product.description', 'es'); // ¡Un producto fantástico!
const unknownTranslation = getTranslation('nonexistent.key' as TranslationKey, 'en'); // Translation not found for key: nonexistent.key in language: en

            

              
                Copy
              
            
          

Typen TranslationKey säkerställer att alla översättningsnycklar följer ett konsekvent format, vilket förenklar processen att hantera översättningar och förhindra fel.

Begränsningar

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

• Komplexitet: Komplex parsningslogik kan snabbt bli svår att läsa och underhålla.
• Prestanda: Omfattande användning av template literal-typer kan påverka prestandan vid kompilering, särskilt i stora projekt.
• Luckor i typsäkerheten: Som demonstrerats i exemplet med e-postvalidering är kontroller vid kompileringstid ibland inte tillräckliga. Körtidsvalidering behövs fortfarande för fall där extern data måste följa strikta format.

Bästa praxis

För att effektivt använda template literal-typer, följ dessa bästa praxis:

• Håll det enkelt: Bryt ner komplex parsningslogik i mindre, hanterbara typer.
• Dokumentera dina typer: Dokumentera tydligt syftet och användningen av dina template literal-typer.
• Testa dina typer: Skapa enhetstester för att säkerställa att dina typer beter sig som förväntat.
• Balansera validering vid kompilering och körtid: Använd template literal-typer för grundläggande validering och körtidskontroller för mer komplexa scenarier.

Slutsats

TypeScript template literal-typer erbjuder ett kraftfullt och flexibelt sätt att manipulera strängtyper vid kompileringstid. Genom att kombinera template literals med villkorliga typer och typinferens kan du skapa sofistikerad logik på typnivå för att parsa, validera och transformera strängbaserad data. Även om det finns begränsningar att ta hänsyn till, kan fördelarna med att använda template literal-typer när det gäller typsäkerhet och kodunderhåll vara betydande.

Genom att bemästra dessa avancerade tekniker kan utvecklare skapa mer robusta och pålitliga TypeScript-applikationer.

Vidare utforskning

För att fördjupa din förståelse av template literal-typer, överväg att utforska följande ämnen:

• Mapped Types: Lär dig hur du transformerar objekttyper baserat på template literal-typer.
• Utility-typer: Utforska inbyggda TypeScript utility-typer som kan användas tillsammans med template literal-typer.
• Avancerade villkorliga typer: Dyk djupare in i funktionerna hos villkorliga typer för mer komplex logik på typnivå.