ProgrammatieFrontend ontwikkelaar

Hoe werkt het mechanisme van getypeerde sjabloonliteralen (Template Literal Types) in TypeScript en waarvoor is het nodig?

Slaag voor sollicitatiegesprekken met de Hintsage AI-assistent

Antwoord.

Geschiedenis van de vraag

TypeScript heeft lange tijd literale types voor afzonderlijke string- of numerieke waarden toegestaan, maar met de opkomst van sjabloonliteralen ontstond de behoefte aan typering van specifieke stringpatronen. Template Literal Types voegen de mogelijkheid toe om types te beschrijven die zijn gebaseerd op de sjabloonverbinding van strings, wat statische validatie van de structuur van stringwaarden mogelijk maakt.

Probleem

Het is niet mogelijk om de overeenstemming van een string met een specifiek formaat (bijvoorbeeld 'user_42') te controleren met standaard string-types — ze zijn te algemeen. Zonder sjabloon-types kan de compiler niet garanderen dat een string voldoet aan een strikt gedefinieerd patroon.

Oplossing

Template Literal Types stellen gebruikers in staat om complexe string-types te vormen tijdens de compilatie en zorgen voor een strikte controle van hun overeenstemming met specifieke sjablonen.

Voorbeeldcode:

type UserId = `user_${number}`; function loadUser(id: UserId) { // ... } loadUser('user_123'); // correct loadUser('admin_123'); // compilatiefout

Belangrijke kenmerken:

  • Vormen van string-types op basis van literale samenvoegingen
  • Ondersteuning voor combinaties, insluitingen en manipulaties met objectsleutels
  • Verhoogde typeveiligheid voor stringidentificaties, URL's en andere structuren

Vragen met een valstrik.

Kun je Template Literal Types alleen gebruiken met number/literal? Kun je je eigen stringliteralen in het sjabloon gebruiken?

Je kunt elke literale type gebruiken — strings, getallen, samenvoegingen:

type EventType = `event_${'click' | 'hover'}`; // event_click | event_hover

Kun je een gewone string doorgeven als de functie een Template Literal-type verwacht?

Nee, als het type expliciet een sjabloon-literaal verwacht, is een normale string niet geschikt:

function handler(type: `btn_${string}`) {} handler('btn_click'); // ok handler('button'); // compilatiefout

Werken sjabloonstringtypes met mapped types en keyof?

Ja, Template Literal Types combineren uitstekend met mapped types en objectsleutels:

const colors = {red: 1, blue: 2}; type ColorKey = keyof typeof colors; type ColorClass = `color-${ColorKey}`; // color-red | color-blue

Typefouten en antipatronen

  • Gebruik van sjabloontypes waar een gewone string geschikt is
  • Te agressieve sjabloontypes die geen flexibiliteit laten
  • Typebinding aan runtime-waarden die niet door de compiler worden gecontroleerd

Voorbeeld uit het leven

Negatief geval

API accepteert identificaties in de vorm van 'user_XXX', de functie is niet getypeerd — mogelijk is elke string aan te bieden, bij een fout op de server ontstaan er bugs.

Voordelen:

  • Geen beperkingen op de waarde

Nadelen:

  • Het team maakt fouten door onjuiste strings aan te bieden; tests zijn oppervlakkig

Positief geval

Het type UserId = user_${number} wordt gebruikt, voordat de compilatie wordt uitgevoerd, wordt de juistheid van de argumenten van de functies gegarandeerd en zijn er veilige verzoeken aan de server.

Voordelen:

  • Vermindering van het aantal fouten, strikte typevalidatie
  • Verbeterde autocompletion en leesbaarheid van de code

Nadelen:

  • Vereist actualisering van sjabloontypes bij wijziging van het datamodel