¿Qué son los genéricos en TypeScript?

En este artículo, intentaremos comprender todos los hechos, así como los detalles asociados con los genéricos en TypeScript junto con algunos ejemplos de codificación.

Genéricos en TypeScript:

• Cada vez que se escribe o ejecuta un programa o código, una cosa importante de la que uno siempre se ocupa es nada más que hacer componentes reutilizables que garanticen aún más la escalabilidad y flexibilidad del programa o el código durante mucho tiempo.
• Genéricos , por lo tanto, aquí entra en escena, ya que proporciona a un usuario la flexibilidad de escribir el código de cualquier tipo de datos en particular (o tipo de retorno) y que el momento de llamar a ese usuario podría pasar el tipo de datos o el tipo de retorno específicamente.
• Generics proporciona una manera de hacer que los componentes funcionen con cualquiera de los tipos de datos (o tipos de retorno) al momento de llamarlo para una cierta cantidad de parámetros (o argumentos).
• En genéricos, pasamos un parámetro llamado parámetro de tipo que se coloca entre el signo menor ( < ) y el signo mayor ( > ), por ejemplo, debería ser como <type_parameter_name>.

Sintaxis para escribir genéricos:

La siguiente sintaxis que podemos usar para agregar genéricos en nuestro código preescrito (esta es la sintaxis de usar genéricos en funciones):

function function_name <type_parameter> 
    (parameter_name : data_type_parameter) 
    : return_type_parameter {
        // Rest code......
    }

Ventajas de usar Genéricos en TypeScript:

La siguiente es la lista de ventajas que los genéricos proporcionan en TypeScript:

• Al usar genéricos, podemos almacenar de manera segura un solo tipo de objeto sin almacenar también los otros tipos.
• Al usar genéricos, no necesitamos implementar el encasillamiento de ninguna variable o función en el momento de la llamada.
• Los genéricos generalmente se verifican en el momento de la compilación, por lo que no existe ningún problema en el tiempo de ejecución.

Ahora, después de comprender todos los detalles mencionados anteriormente que están asociados con los genéricos, avancemos y veamos algunos de los siguientes ejemplos de código para una mejor comprensión de los genéricos:

Ejemplo 1: En este ejemplo, simplemente veremos cómo podemos intentar crear una función genérica con parámetros genéricos dentro y, además, cómo podemos llamar a esa función genérica con parámetros genéricos.

function displayData <type_parameter> 
    (parameter :type_parameter) : type_parameter{
      return parameter;
  }
  
let result1 = displayData <string> ("GeeksforGeeks");
let result2 = displayData <string> ("Hello World !!");
let result3 = displayData <number> (1234567890);
  
console.log(result1);
console.log(result2);
console.log(result3);

Producción:

GeeksforGeeks
Hello World !!
1234567890

Ejemplo 2: En este ejemplo, podemos intentar crear una función genérica con un tipo de array de retorno genérico junto con los parámetros genéricos (que también son del tipo de datos de array genérico) pasados ​​y además cómo podemos llamar a esa función genérica que devuelve la array como resultado.

let displayResult = <type_parameter> 
    (data_item : type_parameter[]) : type_parameter[] => {
    return new Array <type_parameter>().concat(data_item);
  }
  
let numbersArray = displayResult<number>
    ([50 , 60 , 80 , 90]);
      
let stringArray = displayResult<string>
    (["Hello World", "GeeksforGeeks"]);
  
console.log(numbersArray);
console.log(stringArray);
  
numbersArray.push(100);
stringArray.push("Apple");
  
console.log(numbersArray);
console.log(stringArray);

Producción:

[ 50, 60, 80, 90 ]
[ 'Hello World', 'GeeksforGeeks' ]
[ 50, 60, 80, 90, 100 ]
[ 'Hello World', 'GeeksforGeeks', 'Apple' ]

Ejemplo 3: En este ejemplo, crearemos algunas variables de tipo multigenérico y veremos cómo podemos llamarlas dentro de nuestra función que estamos creando para la ejecución.

let displayResult = <type_1, type_2> 
    (id : type_1, name : type_2) => {
      return id + " - " + name;
    }
  
let data_1 = displayResult<number, 
    string>(2000, "GeeksforGeeks");
      
let data_2 = displayResult<number, 
    string>(2001, "Hello World !!");
  
console.log(data_1);
console.log(data_2);

Producción:

2000 - GeeksforGeeks
2001 - Hello World !!

Referencia: https://www.typescriptlang.org/docs/handbook/2/generics.html