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 numberLa 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.
Desafío
FácilSe te proporciona lo siguiente del desafío anterior:
- La función genérica
wrapInObject<T>que recibe un elemento de tipoTy 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
explicitStringllamando awrapInObject<string>con"TypeScript" - Crea una variable
explicitNumberllamando awrapInObject<number>con25 - Crea una variable
explicitBooleanllamando awrapInObject<boolean>confalse
Uso de la inferencia de tipos:
- Crea una variable
inferredStringllamando awrapInObjectcon"Generics"(deja que TypeScript infiera el tipo) - Crea una variable
inferredNumberllamando awrapInObjectcon99(deja que TypeScript infiera el tipo) - Crea una variable
inferredBooleanllamando awrapInObjectcontrue(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 resultadosEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Introducción a TypeScript
1Primeros pasos con TS
¿Qué es TypeScript?¿Por qué usar TypeScript?Tu primer código en TypeScriptProceso de compilación y erroresResumen: Introducción a TS4Trabajando con funciones
Tipado de parámetros y valores de retornoTipado de funciones de flechaEl tipo de retorno 'void'Parámetros opcionales con '?'Valores de parámetros por defectoTipado de parámetros restDefinición de tipos de funcionesRepaso: Construcción de funciones tipadas2Tipos principales
Tipos básicos: str, num, booleanEl tipo 'any': Vía de escapeEl tipo 'unknown'Trabajando con 'null' y 'undef'Inferencia de tipos en acciónAnotaciones de tipo explícitasResumen: Práctica de tipos principales5Tipos: Alias, Uniones e Intersecciones
Alias de tipos para primitivosTipos de unión ('|')Trabajando con tipos de uniónTipos literalesTipos de intersección ('&')Combinando alias de tiposRepaso: Combinaciones de tipos avanzadas3Estructura de datos: Arrays y Tuplas
Arrays tipadosModificador 'readonly' para Arrays¿Qué es una Tupla?Declaración y acceso a TuplasDesestructuración de TuplasTuplas ReadonlyArrays tipados multidimensionalesOperador Spread con ArraysResumen: Arrays y Tuplas6Tipado de Objetos e Interfaces
Anotaciones de tipo de objeto en líneaAlias de tipo para objetosIntroducción a las interfacesInterfaces vs. Alias de tipoPropiedades opcionales y ReadonlyExtensión de interfaces y tiposAgregar métodos a interfacesRepaso: Definición de estructuras de objetos9Genéricos: Un primer vistazo
El problema que resuelven los genéricosCreación de una función de identidad genéricaUso de una función genéricaArrays genéricosInterfaces genéricasRepaso: Práctica de funciones genéricasPractica por tu cuenta: Playground de TypeScript