Interfaz de genéricos en TypeScript

“Una parte importante de la ingeniería de software consiste en crear componentes que no solo tengan API coherentes y bien definidas, sino que también sean reutilizables. Esta frase está en la documentación oficial con la que empezaríamos. Hay idiomas que son fuertes en escritura estática y otros que son débiles en escritura dinámica. En este punto, Typescript ha demostrado tener API bien definidas con aquellos lenguajes que son débiles en la escritura dinámica. 

¿Por qué genéricos?

Para cada enfoque tecnológico, estamos a punto de aprender que debemos saber por qué se ha creado y agregado este enfoque, así que piénselo. Tenemos una función que toma un número y hace algunas operaciones, finalmente devuelve un número, y necesitamos una función que toma una string y hace las mismas operaciones y devuelve una string, y esto está resolviendo el problema del tipo «cualquiera» y capaz para capturar el tipo.

Trabajando con arreglos:

Solo necesita agregar Tipo antes de corchetes como este, tomaría el ejemplo de array para que funcione, como tratarían los ejemplos de interfaz, en el siguiente ejemplo crearemos una función que toma una array con un cierto tipo y devolver la array.

Ejemplo 1:

// This function takes array of any type that
// you determine while calling the function
function getArray<Type>(array: Type[]) {
 
    // Do some operations
    return array;
}
 
// We call the function
const arrayOfStrings = getArray < string > ([
    "John", "Sam", "Arnold"])

Salida :

 

También podemos agregar más que un tipo genérico, crearé una función que tome dos argumentos con tipos T & V indefinidos y devuelva sus valores

Ejemplo 2:

// Here we can define two generics type
// with any name you choose
function getInfo<T,V>(name:T,id:V){
    return `My name is ${name} and my id is ${id}`;
}
 
console.log(getInfo("John",123));

Producción:

 

Genéricos Con interfaz: Primero, ¿qué es la interfaz en TypeScript y cuál es el enfoque que seguimos?

Simplemente, podemos decir que la interfaz es el esquema para un objeto que crea, define las propiedades y sus tipos, y podemos definir una interfaz con la palabra clave de interfaz aquí está la sintaxis en el siguiente ejemplo, determinamos una interfaz y la escribimos sus propiedades y el esquema que debe seguir el objeto.

Ejemplo 1:

interface props {
    // Here we define properties & and their types
    id: number,
    name: string,
}

Y ahora podemos definir el tipo genérico agregando <T> en el siguiente ejemplo, crearé una interfaz y haré que el objeto persona aplique sus propiedades y pase el tipo de la array

// Here is the interface and define
// generic type with <T>
interface props<T> {
    names: T[];
    id: number
}
 
// Here we make the object apply to the
// schema we define in the interface
let person : props<string> =
    {names:["first name","last name"],id:123}
 
console.log(person);

Producción:

 

También podemos especificar qué tipo T debe contener una determinada propiedad usando la palabra clave extends en el siguiente ejemplo, definimos una interfaz que toma el tipo T que debe tener la propiedad id, en segundo lugar, crea una interfaz que tiene la propiedad id y la pasa como un escriba para la  interfaz de accesorios y haga que el objeto customData aplique sus propiedades

Ejemplo 2:

interface props<T extends {id:number}>{
    data:T[]
}
 
// Here the object must have id property
interface objectProps{
    id:number,
    name:string,
    SN:number
}
 
// Passing objectProps as a type containing id
let customData : props<objectProps> =
    {data:[{id:123,name:"John",SN:4324342}]}
 
console.log(customData);

Producción:

 

En el ejemplo anterior, si el Objeto “customData” no tiene “id”, será un error. Entonces, por la palabra clave «extiende» el objeto «customData» se ve obligado a contener la propiedad «id», esta técnica se llama » Restricciones genéricas».

También podemos hacer esto en el siguiente ejemplo. Cree una interfaz que contenga la propiedad id y luego cree una función que tome una array de tipo T que amplíe la interfaz de accesorios y devuelva la array.

Ejemplo 3:

interface props {
    id: number
}
 
// This function returns array of objects
// that must have id property
function getInfo <T extends props>(data:T[]):T[]{
    return data;
}
 
console.log(getInfo([{id:123,name:"John"},
    {id:345,name:"debruyne"},
    {id:789,name:"sam"}]));

Producción: 

 

¿La ventaja de los genéricos?

La ventaja comienza a mostrarse en esta pregunta: ¿Podemos reemplazar los genéricos con cualquier tipo? Técnicamente no, no podemos, cuando usamos cualquiera como genérico, casi no sabemos qué tipo de función toman los argumentos y qué devuelve, perdemos información sobre esta función, y como dice la documentación oficial: por genéricos, podemos capturar el tipo de funciones y variables, por genéricos mantenemos y aumentamos la seguridad del tipo.

¿La desventaja de los genéricos en la interfaz?

Podemos decir que escribe más código y agrega más especificaciones a nuestro código, lo que a veces lo ensucia.

Aplicaciones Podemos usar TypeScript instalando TypeScript a través de npm y agregándolo a cualquier aplicación de javascript, hace que la aplicación de prueba sea más fácil y agrega una función de tipeo estático fuerte para javascript, y a través del tiempo error de compilación si escribimos el tipo incorrecto de la propiedad