Menu
CoddyTech

Uso de una función genérica

Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 59 de 73.

Hay dos formas de usar una función genérica: con argumentos de tipo explícitos o dejando que TypeScript infiera el tipo automáticamente.

Así es como puedes llamar a una función genérica con argumentos de tipo explícitos:

const result1 = wrapInObject<string>("hello");
const result2 = wrapInObject<number>(42);

<string> y <number> indican explícitamente a TypeScript qué tipo usar para T. Esto te proporciona un control total sobre el parámetro de tipo.

Sin embargo, TypeScript es lo suficientemente inteligente como para inferir el tipo a partir del argumento que pasas en la mayoría de los casos:

const result1 = wrapInObject("hello");  // T inferred as string
const result2 = wrapInObject(42);       // T inferred as number

La inferencia de tipos hace que tu código sea más limpio y legible, manteniendo al mismo tiempo la misma seguridad de tipos. TypeScript analiza el argumento y determina automáticamente qué debería ser T, por lo que no necesitas escribir la anotación de tipo explícita a menos que quieras sobrescribir el tipo inferido.

challenge icon

Desafío

Fácil

Se te proporciona lo siguiente del desafío anterior:

  • La función genérica wrapInObject<T> que recibe un elemento de tipo T y devuelve { value: T }

Llama a la función wrapInObject usando tanto argumentos de tipo explícitos como inferencia de tipos:

Uso de argumentos de tipo explícitos:

  • Crea una variable explicitString llamando a wrapInObject<string> con "TypeScript"
  • Crea una variable explicitNumber llamando a wrapInObject<number> con 25
  • Crea una variable explicitBoolean llamando a wrapInObject<boolean> con false

Uso de la inferencia de tipos:

  • Crea una variable inferredString llamando a wrapInObject con "Generics" (deja que TypeScript infiera el tipo)
  • Crea una variable inferredNumber llamando a wrapInObject con 99 (deja que TypeScript infiera el tipo)
  • Crea una variable inferredBoolean llamando a wrapInObject con true (deja que TypeScript infiera el tipo)

Imprime las siguientes salidas:

  • Imprime explicitString.value
  • Imprime explicitNumber.value
  • Imprime explicitBoolean.value
  • Imprime inferredString.value
  • Imprime inferredNumber.value
  • Imprime inferredBoolean.value

Pruébalo tú mismo

// Función genérica del desafío anterior
function wrapInObject<T>(item: T): { value: T } {
    return { value: item };
}

// TODO: Escribe tu código aquí
// Crea variables usando argumentos de tipo explícitos
// Crea variables usando inferencia de tipos

// Imprime los resultados
quiz iconPonte a prueba

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

Todas las lecciones de Introducción a TypeScript

Practica por tu cuenta: Playground de TypeScript