Arrays genéricos

Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy — lección 60 de 73.

Los arrays y los genéricos funcionan de maravilla juntos en TypeScript. Cuando aprendiste sobre los arrays tipados anteriormente, utilizaste la sintaxis T[] para especificar que un array solo puede contener elementos de un tipo específico. Los genéricos te ofrecen otra forma de expresar este mismo concepto.

TypeScript proporciona una sintaxis alternativa para arrays tipados utilizando el formato Array<T>:

// Estas dos declaraciones son equivalentes:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

La sintaxis Array<T> es particularmente útil cuando se trabaja con funciones genéricas que operan sobre arreglos. Hace que la naturaleza genérica de tu código sea más explícita y legible, especialmente cuando estás creando funciones que pueden trabajar con arreglos de cualquier tipo mientras se preserva la seguridad de tipos.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una función genérica llamada getFirstElement que reciba un array de cualquier tipo y devuelva el primer elemento o undefined si el array está vacío.

La función debe:

Usar un parámetro de tipo genérico T
Aceptar un parámetro llamado arr de tipo Array<T>
Devolver el primer elemento de tipo T o undefined
Tener una anotación de tipo de retorno explícita de T | undefined

Crea los siguientes arrays utilizando la sintaxis Array<T>:

stringArray de tipo Array<string> que contenga ["apple", "banana", "cherry"]
numberArray de tipo Array<number> que contenga [10, 20, 30, 40]
booleanArray de tipo Array<boolean> que contenga [true, false, true]
emptyStringArray de tipo Array<string> que esté vacío

Prueba tu función e imprime los siguientes resultados:

Imprime el resultado de llamar a getFirstElement con stringArray
Imprime el resultado de llamar a getFirstElement con numberArray
Imprime el resultado de llamar a getFirstElement con booleanArray
Imprime el resultado de llamar a getFirstElement con emptyStringArray
Imprime el resultado de llamar a getFirstElement con un nuevo Array<string> que contenga ["single"]

Hoja de referencia

TypeScript proporciona dos sintaxis equivalentes para arrays tipados:

// Estas dos declaraciones son equivalentes:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

La sintaxis Array<T> es particularmente útil cuando se trabaja con funciones genéricas que operan sobre arrays, haciendo que la naturaleza genérica de su código sea más explícita y legible mientras se preserva la seguridad de tipos.

Pruébalo tú mismo

// TODO: Escribe tu código aquí
// Crea la función genérica getFirstElement

// Crea los arreglos requeridos usando la sintaxis Array<T>

// Prueba la función e imprime los resultados

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.