Fundamentos de TypeScript

1

¿Qué es TypeScript y por qué usarlo?

2

Instalación de Node.js y TypeScript CLI, configuración de tsconfig.json

3

Tipos primitivos: string, number, boolean, null, undefined de Typescript

4

Tipos especiales: any, unknown, never, void de TypeScript

5

Arrays, Tuplas, Enums en TypeScript

Funciones e Interfaces

6

Declaración de funciones, tipado de parámetros y valores de retorno

7

Parámetros opcionales, valores por defecto y sobrecarga de funciones

8

Creación y uso de interfaces de TypeScript

9

Propiedades opcionales, readonly, extensión de interfaces en TypeScript

Clases y Programación Orientada a Objetos

10

Creación de clases y constructores En TypeScript

11

Modificadores de acceso (public, private, protected) en Typescript

12

Uso de extends, sobreescritura de métodos en TypeScript

13

Introducción a Genéricos en Typescript

14

Restricciones con extends, genéricos en interfaces

Módulos y Proyectos

15

Importación y exportación de módulos en TypeScript

16

Agregando mi archivo de Typescript a un sitio web

17

Configuración de un proyecto Web con TypeScript

18

Selección de elementos, eventos, tipado en querySelector en TypeScript

19

Crear un proyecto de React.js con Typescript

20

Crea un proyecto con Angular y Typescript

21

Crea una API con Typescript y Express.js

Conceptos Avanzados

22

Introducción a types en TypeScript

23

Implementación de Decoradores de TypeScript

24

Async/await en Typescript

25

Pruebas unitarias con Jest y TypeScript

26

Principios SOLID, código limpio, patrones de diseño en Typescript

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de TypeScript

Curso de TypeScript

Amin Espinoza

Amin Espinoza

Introducción a Genéricos en Typescript

13/26
Recursos

Los tipos genéricos en TypeScript representan una solución elegante para uno de los problemas fundamentales que este lenguaje busca resolver: el tipado en JavaScript. Esta característica permite crear código flexible y reutilizable mientras se mantiene la seguridad de tipos, algo especialmente valioso cuando necesitamos adaptar sistemas JavaScript existentes a TypeScript sin comprometer la funcionalidad.

¿Qué son los tipos genéricos en TypeScript?

Los tipos genéricos son una característica poderosa que permite crear componentes que pueden trabajar con una variedad de tipos de datos en lugar de estar limitados a uno solo. Funcionan como una especie de "comodín" que se adapta al tipo de dato que recibe, proporcionando flexibilidad sin sacrificar la seguridad de tipos.

La sintaxis para declarar un tipo genérico utiliza los símbolos <> con una letra (comúnmente T) que representa el tipo:

function identity<T>(arg: T): T {
  return arg;
}

Esta función puede recibir cualquier tipo de dato y devolverlo sin alterar su tipo original. La magia ocurre cuando TypeScript infiere automáticamente el tipo basado en el argumento proporcionado.

Implementación de funciones genéricas

Las funciones genéricas son probablemente la forma más común de utilizar esta característica. Veamos un ejemplo práctico:

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("cualquier valor");
console.log("output1: " + output1);

let output2 = identity<number>(42);
console.log("output2: " + output2);

En este ejemplo, la misma función identity puede manejar tanto strings como números, manteniendo la información de tipo en cada caso. TypeScript infiere automáticamente el tipo basado en el argumento proporcionado, lo que hace que el código sea más limpio y seguro.

Creación de clases genéricas

Los tipos genéricos también pueden aplicarse a clases, lo que permite crear estructuras de datos reutilizables que funcionan con diferentes tipos:

class Caja<T> {
  contenido: T;
  
  constructor(valor: T) {
    this.contenido = valor;
  }
  
  obtenerContenido(): T {
    return this.contenido;
  }
}

let cajaDeString = new Caja<string>("libros");
console.log("Contenido de la caja de string", cajaDeString.obtenerContenido());

Esta clase Caja puede almacenar cualquier tipo de dato, desde strings hasta números o incluso objetos complejos. La ventaja es que TypeScript garantiza la consistencia de tipos dentro de cada instancia de la clase.

¿Cuándo utilizar tipos genéricos?

Los tipos genéricos son particularmente útiles en varios escenarios:

  • Cuando necesitas crear componentes reutilizables que funcionen con diferentes tipos de datos.
  • Durante la migración de JavaScript a TypeScript, donde algunos sistemas no pueden adaptarse fácilmente a valores tipados específicos.
  • Al crear estructuras de datos como colecciones, pilas, colas o árboles que deben funcionar con cualquier tipo.
  • Para implementar patrones de diseño como fábricas, decoradores o adaptadores que necesitan ser flexibles en cuanto a los tipos que manejan.

La clave está en encontrar el equilibrio entre flexibilidad y seguridad de tipos. Los genéricos te permiten mantener ambas, a diferencia de usar any, que sacrifica completamente la verificación de tipos.

Combinando genéricos con interfaces

Una práctica recomendada es combinar genéricos con interfaces para crear contratos de tipo flexibles:

interface Procesador<T> {
  procesar(valor: T): T;
  formatear(valor: T): string;
}

class ProcesadorNumerico implements Procesador<number> {
  procesar(valor: number): number {
    return valor * 2;
  }
  
  formatear(valor: number): string {
    return `$${valor.toFixed(2)}`;
  }
}

Esta combinación permite crear sistemas altamente adaptables mientras se mantiene la seguridad de tipos en todo momento.

Los tipos genéricos representan una de las características más potentes de TypeScript, permitiéndote escribir código que es a la vez flexible y seguro. Experimentar con diferentes combinaciones de funciones, clases e interfaces genéricas te ayudará a dominar esta característica y aplicarla efectivamente en tus proyectos. ¿Has utilizado tipos genéricos en tus proyectos? Comparte tus experiencias y dudas en los comentarios.

Aportes 6

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

les dejo un esquema fácil de digerir ![](https://static.platzi.com/media/user_upload/image-3836f83e-1e09-4188-b711-6f61935b9b89.jpg)
Honestamente me esta gustando mucho este curso e intento implementar todo lo que miro en un proyecto personal que tengo :)
## 🧠 ¿Qué son los genéricos? Un **genérico** es una forma de decirle a TypeScript: > “No sé exactamente qué tipo usaré todavía, pero lo sabré más adelante, y cuando lo sepa, **quiero que lo respetes en todo el código**.” Piensa en los genéricos como **placeholders** para tipos. Es como una **función para tipos**. tsCopiarEditar`function identidad<T>(valor`: T): T { ` return` valor; } Aquí, `T` es un **tipo genérico**. Puede ser `string`, `number`, `boolean`, un objeto, un array, lo que sea.
Los tipos genéricos en TypeScript permiten crear componentes y funciones que pueden trabajar con diferentes tipos de datos sin perder la seguridad de tipos. Se utilizan para definir funciones, clases o interfaces que pueden aceptar múltiples tipos, proporcionando flexibilidad y reutilización del código. Al definir un tipo genérico, se emplea una letra como `T` entre ángulos (`<T>`), que representa el tipo que se pasará más adelante. Por ejemplo, al crear una función de identidad que devuelve el mismo valor que se le pasa como argumento, se podría definir así: ```typescript function identity<T>(arg: T): T { return arg; } ``` En este caso, `T` puede ser cualquier tipo: un número, una cadena o incluso un objeto. Esto permite que la función sea adaptable a diferentes contextos de uso. Cuando invocas la función, TypeScript entiende el tipo que le estás pasando y proporciona inferencia automática: ```typescript let outputString = identity<string>("Hello"); let outputNumber = identity<number>(42); ``` Además de funciones, los genéricos pueden usarse en clases e interfaces. Por ejemplo, al crear una clase que almacena valores de distintos tipos, se puede definir así: ```typescript class Box<T> { content: T; constructor(value: T) { this.content = value; } } ``` Puedes instanciar `Box` con distintos tipos: ```typescript let stringBox = new Box<string>("Books"); let numberBox = new Box<number>(123); ``` Los tipos genéricos también favorecen la creación de interfaces genéricas, lo que permite definir estructuras de datos más flexibles y robustas. Por ejemplo: ```typescript interface Pair<K, V> { key: K; value: V; } ``` En resumen, los genéricos en TypeScript son cruciales para crear código más robusto, manteniendo la seguridad de tipos mientras se maximiza la reutilización y adaptabilidad del código.
por si se preguntan como se ve una interface con un genérico, se mira asi: ```js interface Generico<T> { valor: T; valor2: T; valor3: T; edad: number; nombre: string; esDev: boolean; salario: number; } const objetoGen: Generico<number> = { valor: 1, valor2: 2, valor3: 3, edad: 20, nombre: "Juan", esDev: true, salario: 4000 } ```
Los genéricos se representan con `<T>`, donde `T` es el nombre del tipo genérico (puedes usar cualquier nombre, pero `T` es una convención común). ```ts interface Par<T, U>{ primero: T; segundo: U; } const par: Par<number, string> = { primero: 1, segundo: 'dos' } ```