TypeScriptLeçon 8 sur 16

Génériques

Un générique est une fonction ou un type doté d'un paramètre de type, souvent nommé T. Le même code fonctionne alors avec des nombres, des chaînes ou des objets, sans perdre la vérification des types.

L’essentiel

function first<T>(items: T[]): T | undefined : T est fixé à l'appel.
T est généralement déduit : first([10, 20]) renvoie number | undefined.
Les interfaces peuvent aussi être génériques : Box<boolean>.
T extends { length: number } est une contrainte : seules les valeurs avec length conviennent.

Exemple

function first<T>(items: T[]): T | undefined {  return items[0];} const n = first([10, 20]); // number | undefinedconst s = first(["a", "b"]); // string | undefined interface Box<T> {  value: T;}const flag: Box<boolean> = { value: true }; function longest<T extends { length: number }>(a: T, b: T): T {  return a.length >= b.length ? a : b;}// longest(10, 20); // error: number has no length console.log(`${n} ${s} ${flag.value}`);console.log(longest("tea", "coffee"));console.log(longest([1, 2, 3], [4]).join("-"));

first renvoie exactement le type stocké dans le tableau, pas any. longest accepte chaînes et tableaux, mais pas les nombres : un nombre n'a pas de length.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Rendez chunk générique, découpez le tableau en pages avec slice et décommentez le second appel. Sortie : « a,b | c,d | e » et « 1,2,3 | 4,5,6 | 7 ».

// TODO: make chunk generic: it takes T[] and returns T[][]function chunk(items: string[], size: number): string[][] {  const pages: string[][] = [];  // TODO: cut items into pages of `size` elements with items.slice(i, i + size)  pages.push(items);  return pages;} function show<T>(pages: T[][]): string {  return pages.map((page) => page.join(",")).join(" | ");} console.log(show(chunk(["a", "b", "c", "d", "e"], 2)));// TODO: uncomment when chunk is generic// console.log(show(chunk([1, 2, 3, 4, 5, 6, 7], 3)));

// TODO: make chunk generic: it takes T[] and returns T[][]
function chunk(items: string[], size: number): string[][] {
  const pages: string[][] = [];
  // TODO: cut items into pages of `size` elements with items.slice(i, i + size)
  pages.push(items);
  return pages;
}

function show<T>(pages: T[][]): string {
  return pages.map((page) => page.join(",")).join(" | ");
}

console.log(show(chunk(["a", "b", "c", "d", "e"], 2)));
// TODO: uncomment when chunk is generic
// console.log(show(chunk([1, 2, 3, 4, 5, 6, 7], 3)));

Sortie

Ce que le programme affiche apparaîtra ici.