ProgrammationDéveloppeur Frontend

Comment fonctionne le mécanisme des types de chaînes littérales de modèle (Template Literal Types) en TypeScript et à quoi sert-il ?

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse.

Historique de la question

TypeScript a longtemps permis de décrire des types littéraux pour des valeurs de chaîne ou de nombre spécifiques, mais avec l'apparition des littéraux de modèle, il est devenu nécessaire de typiser des modèles de chaînes spécifiques. Les types de chaînes littérales de modèle ajoutent la capacité de décrire des types basés sur la concaténation de chaînes de caractères, ce qui permet une validation statique de la structure des valeurs de chaîne.

Problème

Il est impossible de vérifier si une chaîne correspond à un format spécifique (par exemple, 'user_42') avec les types string ordinaires — ils sont trop généraux. Sans les types de modèle, le compilateur ne peut pas garantir que la chaîne correspondra à un motif strictement défini.

Solution

Les types de chaînes littérales de modèle permettent de former des types de chaîne complexes au moment de la compilation et garantissent un contrôle strict de leur conformité à des modèles spécifiques.

Exemple de code :

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

Caractéristiques clés :

  • Formation de types de chaîne sur la base d'unions littérales
  • Prise en charge de combinaisons, d'imbrications et de manipulations avec les clés d'objets
  • Amélioration de la sécurité des types pour les identifiants de chaîne, les URL et d'autres structures

Questions pièges.

Peut-on utiliser les types de chaînes littérales de modèle uniquement avec number/literal ? Peut-on utiliser ses propres littéraux de chaîne dans le modèle ?

On peut utiliser n'importe quel type littéral — chaînes, nombres, unions :

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

Peut-on passer une chaîne ordinaire si la fonction attend un type de modèle littéral ?

Non, si le type attend explicitement un littéral de modèle, une simple chaîne ne conviendra pas :

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

Les types de chaînes littérales de modèle fonctionnent-ils avec les types mappés et keyof ?

Oui, les types de chaînes littérales de modèle se combinent très bien avec les types mappés et les clés d'objets :

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

Erreurs de typage et anti-patrons

  • Utilisation d'un type de modèle là où n'importe quelle chaîne conviendrait
  • Types de modèle trop agressifs, ne laissant pas de flexibilité
  • Liaison des types à des valeurs d'exécution qui ne sont pas contrôlées par le compilateur

Exemples concrets

Cas négatif

L'API accepte des identifiants de type 'user_XXX', la fonction n'est pas typée — il est possible de passer n'importe quelle chaîne, ce qui engendre des bogues en cas d'erreur côté serveur.

Avantages :

  • Pas de restrictions sur la valeur

Inconvénients :

  • L'équipe se trompe en passant des chaînes incorrectes ; les tests sont superficiels

Cas positif

On utilise le type UserId = user_${number}, garantissant avant la compilation la validité des arguments des fonctions et des requêtes sûres au serveur.

Avantages :

  • Réduction du nombre d'erreurs, validation stricte des types
  • Amélioration de l'auto-complétion et de la lisibilité du code

Inconvénients :

  • Nécessite une actualisation des types de modèle lors du changement de schéma de données