Trier un tableau d'objets dans TypeScript

Triez un tableau d’objets typés avec employeesList.sort((a, b) => a.empId - b.empId). Le comparateur renvoie un nombre négatif lorsque a doit venir en premier, un nombre positif lorsque b doit venir en premier et zéro lorsque les valeurs comparées sont égales. Inversez l’ordre de la soustraction pour un tri décroissant, ou comparez une autre propriété lorsque les premières clés sont égales. sort() modifie le tableau d’origine ; utilisez la syntaxe spread pour créer d’abord un nouveau tableau si vous devez conserver l’ordre initial.

Définir le type des objets

Une interface décrit les propriétés que chaque enregistrement doit fournir. Ici, chaque employé possède un empId numérique et un empDesignation de type chaîne. L’utilisation d’un type commun permet à TypeScript de vérifier à la fois le tableau et les noms de propriétés utilisés dans le comparateur. L’interface constitue un contrat à la compilation : elle aide à repérer les fautes de frappe dans les noms de propriétés pendant la modification du code, mais ne valide pas à l’exécution les données reçues d’une source externe. Veillez à ce que les types des propriétés correspondent aux valeurs utilisées par le comparateur.

Créer un tableau d’objets en TypeScript

Déclarez le tableau comme Employee[] afin que chaque élément respecte l’interface. En TypeScript, définissez interface Employee { empId: number; empDesignation: string }, puis déclarez const employeesList: Employee[] = [...]. L’exemple contient deux employés ayant le même empId ; leurs intitulés de poste fournissent une deuxième clé utile au comparateur final. Les noms de propriétés dans les données et dans la fonction de tri doivent correspondre exactement. Chaque littéral d’objet est vérifié par rapport à Employee : une propriété obligatoire manquante ou une valeur du mauvais type est signalée lors de la vérification des types. L’exemple exécutable ci-dessous utilise des littéraux d’objet compatibles avec JavaScript afin de pouvoir s’exécuter directement dans Node.js ; les annotations TypeScript doivent figurer dans votre fichier source .ts.

Trier des objets selon une ou plusieurs propriétés

Le comparateur numérique a.empId - b.empId trie les identifiants par ordre croissant et renvoie naturellement zéro en cas d’égalité. Pour un ordre décroissant, utilisez b.empId - a.empId. Pour trier selon une deuxième propriété, renvoyez le résultat de la comparaison des identifiants s’il est différent de zéro, puis comparez empDesignation lorsque les identifiants sont égaux. Un comparateur doit renvoyer zéro pour les enregistrements égaux selon les deux clés ; renvoyer -1 pour chaque égalité peut donner à l’algorithme de tri une règle de classement incohérente. Pour les autres champs de type chaîne, utilisez une comparaison de chaînes plutôt qu’une soustraction. localeCompare() est une option pratique lorsque l’ordre linguistique importe ; son résultat peut dépendre de la locale. Choisissez donc une locale explicite si les utilisateurs ont besoin d’un ordre régional cohérent. Si une propriété peut être absente, décidez du classement de ces enregistrements et traitez ce cas avant de comparer les valeurs.

Exécutez cet exemple :

const employeesList = [
  { empId: 20, empDesignation: "senior engineer" },
  { empId: 14, empDesignation: "junior engineer" },
  { empId: 14, empDesignation: "developer" },
  { empId: 25, empDesignation: "program manager" },
  { empId: 12, empDesignation: "director" },
];

const byIdAscending = [...employeesList].sort((a, b) => a.empId - b.empId);
const byIdDescending = [...employeesList].sort((a, b) => b.empId - a.empId);
const byIdThenDesignation = [...employeesList].sort((a, b) =>
  a.empId - b.empId || a.empDesignation.localeCompare(b.empDesignation)
);

console.log(byIdAscending.map((employee) => employee.empId).join(", "));
console.log(byIdDescending.map((employee) => employee.empId).join(", "));
console.log(byIdThenDesignation.map((employee) => `${employee.empId}: ${employee.empDesignation}`).join(" | "));

12, 14, 14, 20, 25
25, 20, 14, 14, 12
12: director | 14: developer | 14: junior engineer | 20: senior engineer | 25: program manager

La syntaxe spread fait en sorte que chaque tri s’effectue sur une copie et laisse employeesList dans son ordre de déclaration. Les deux premières lignes affichent les identifiants dans des ordres opposés. La dernière ligne affiche chaque identifiant avec son intitulé de poste ; la comparaison des intitulés ne s’applique qu’aux employés dont les identifiants sont égaux. Dans une application réelle, choisissez une propriété secondaire qui donne un sens utile aux égalités pour vos lecteurs ; ajoutez d’autres comparaisons selon le même principe si nécessaire.