Top Code 2024, les challenges sont de nouveau disponibles dans les boards pour les participant(e)s => Boards

Typescript : présentation du type littéral

Présentation et mise en pratique d’un type littéral dans un challenge débutant.

→ Corrigé du Challenge : Pierre-Feuille-Ciseaux

Définition du type littéral

Un type littéral en Typescript est un moyen de définir un type qui est limité à une valeur spécifique ou un ensemble précis de valeurs.

Contrairement aux types généraux comme « string », « number » qui peuvent accepter un nombre infini de valeurs, un type littéral est beaucoup plus restrictif (« string » peut contenir n’importe quelle chaine de caractères, quand « number » peut contenir n’importe quel nombre).

Un type littéral sera alors très utile pour spécifier exactement quelles valeurs sont acceptables pour une variable, une fonction ou un paramètre. Cela permettra un contrôle plus fin et une meilleure compréhension (et documentation du code).

Quelques exemples :

Type littéral de chaîne :

let monJeu: 'pierre';
monJeu = 'pierre'; // Valide
// monJeu = 'feuille'; // Erreur de compilation car 'feuille' n'est pas assignable à 'pierre'

Type littéral numérique :

let monScore: 1 | 2 | 3 | 4 | 5; // On utilise l'union avec "|"
monScore = 2; // Valide
monScore = 3; // Valide
// monScore = 10; // Erreur de compilation car 10 n'est pas assignable à monScore

Précision : L’union en TypeScript, utilisant |, permet à une variable d’avoir une valeur parmi plusieurs types ou valeurs spécifiés, assurant une certaine sécurité en limitant les affectations à ces choix. Ici la variable monScore peut donc prendre une valeur au choix parmi 1, 2, 3, 4 ou 5. Toute autre valeur déclenchera une erreur.

Mise en pratique du type littéral dans un corrigé

Pour illustrer davantage et utiliser concrètement un type littéral, nous allons corriger le challenge Pierre Feuille Ciseaux !

Mon type littéral contiendra les différents coups possibles :

type Play = 'P' | 'F' | 'C';

Je vais donc pouvoir utiliser Play pour typer ma fonction « counterPlay », qui sert à retourner le coup à jouer face au coup de l’adversaire. S’il fait Pierre (P), je fois faire Feuille (F), etc.

function counterPlay(play: Play): Play {
    const match: { [key in Play]: Play } = {
        P: 'F',
        F: 'C',
        C: 'P',
    };

    return match[play];
}

Dans la déclaration de ma fonction, j’indique donc que j’attends un Play et que je retournerais un Play. De la même façon, match contient des clés et des valeurs qui font partie de Play. Si je me retrouvais avec une autre valeur, par exemple « S », j’aurais tout de suite une erreur à la compilation (et dès mon IDE) :

  • Object literal may only specify known properties, and ‘…’ does not exist in type ‘{ P: Play; F: Play; C: Play; }’
  • Type ‘ »… »‘ is not assignable to type ‘Play’

Et mon programme principal :

const coups: string = 'FCCCFP';
let response: string = '';

for (const play of coups) {
    response += counterPlay(play as Play);
}

console.log(response);

Un peu d’explications :

  • coups est la donnée en provenance du challenge, il ne changera pas donc il est stocké dans const
  • response va évoluer et est donc stocké dans let
  • je parcours chaque coups, et je « cast » play vers Play pour « transformer » chaque caractère en un Play car c’est ce qu’attend la fonction counterPlay. Si je ne le fais pas, j’ai l’erreur « Argument of type ‘string’ is not assignable to parameter of type ‘Play’« 

N’hésite pas à utiliser à nouveau un type littéral pour un prochain challenge ! Les cas d’usage sont nombreux 😉


Qui a codé ce superbe contenu ?

Keep learning

Autres contenus à découvrir


Ta newsletter chaque mois

Corrigés, challenges, actualités, veille technique... aucun spam.