TypeScriptLección 8 de 16

Genéricos

Un genérico es una función o un tipo con un parámetro de tipo, casi siempre llamado T. El mismo código sirve para números, textos u objetos sin perder la comprobación de tipos.

Lo esencial

function first<T>(items: T[]): T | undefined: T se concreta al llamar.
Normalmente T se deduce solo: first([10, 20]) devuelve number | undefined.
Las interfaces también pueden ser genéricas: Box<boolean>.
T extends { length: number } es una restricción: solo valen valores con length.

Ejemplo

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 devuelve exactamente el tipo guardado en el array, no any. longest acepta textos y arrays, pero no números, porque un número no tiene length.

Tarea

Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.

Haz genérica la función chunk, corta el array en páginas con slice y descomenta la segunda llamada. Salida: «a,b | c,d | e» y «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)));

Salida

Aquí aparecerá lo que imprima el programa.