Códigos secretos de TypeScript que deberías conocer

Por /

TypeScript, el superset de JavaScript que añade tipado estático, ofrece una serie de características poderosas que a menudo pasan desapercibidas. TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft que se construye sobre JavaScript. Este lenguaje añade tipado estático opcional y otras características que lo hacen ideal para el desarrollo de aplicaciones a gran escala.

En este artículo, te revelaré algunos códigos secretos y funcionales que te harán la vida más fácil como desarrollador.

TypeScript logo en SofTim

1. Tipos condicionales (Conditional Types)

Los tipos condicionales te permiten definir tipos que dependen de una condición.

type TipoUsuario<T> = T extends { admin: boolean } ? 'Administrador' : 'Usuario';

type Usuario1 = TipoUsuario<{ nombre: string }>; // 'Usuario'

type Usuario2 = TipoUsuario<{ nombre: string, admin: true }>; // 'Administrador'

2. Tipos mapeados (Mapped Types)

Los tipos mapeados te permiten transformar los tipos de las propiedades de un objeto.

type UsuarioParcial<T> = {
  [P in keyof T]?: T[P];
};

interface Usuario {
  nombre: string;
  edad: number;
}

type UsuarioParcialTipo = UsuarioParcial<Usuario>; // { nombre?: string, edad?: number }

3. Tipos de inferencia (Inference Types)

Los tipos de inferencia te permiten extraer el tipo de una expresión.

type TipoRetorno<T> = T extends (...args: any[]) => infer R ? R : any;

function obtenerNombre(): string {
  return 'Juan';
}

type NombreTipo = TipoRetorno<typeof obtenerNombre>; // string

4. Tipos de unión discriminada (Discriminated Unions)

Los tipos de unión discriminada te permiten representar valores que pueden ser de diferentes tipos, pero que comparten una propiedad discriminante.

interface Circulo {
  forma: 'circulo';
  radio: number;
}

interface Rectangulo {
  forma: 'rectangulo';
  ancho: number;
  alto: number;
}

type Forma = Circulo | Rectangulo;

function obtenerArea(forma: Forma): number {
  switch (forma.forma) {
    case 'circulo':
      return Math.PI * forma.radio ** 2;
    case 'rectangulo':
      return forma.ancho * forma.alto;
  }
}

5. Tipos de plantilla literal (Template Literal Types)

Los tipos de plantilla literal te permiten crear tipos a partir de cadenas de texto.

type NombreCompleto<T extends { nombre: string, apellido: string }> = `${T['nombre']} ${T['apellido']}`;

interface Persona {
  nombre: string;
  apellido: string;
}

type NombreCompletoTipo = NombreCompleto<Persona>; // `${string} ${string}`

6. Tipos de índice de consulta (Lookup Types)

Los tipos de índice de consulta te permiten obtener el tipo de una propiedad de un objeto.

interface Usuario {
  nombre: string;
  edad: number;
}

type NombreTipo = Usuario['nombre']; // string

7. Tipos de utilidad (Utility Types)

TypeScript ofrece una serie de tipos de utilidad que te permiten realizar transformaciones comunes en los tipos.

interface Usuario {
  nombre: string;
  edad: number;
}

type UsuarioSoloLectura = Readonly<Usuario>; // { readonly nombre: string, readonly edad: number }

8. Tipos de intersección (Intersection Types)

Los tipos de intersección te permiten combinar varios tipos en uno solo.

interface Persona {
  nombre: string;
}

interface Empleado {
  salario: number;
}

type PersonaEmpleado = Persona & Empleado; // { nombre: string, salario: number }

9. Tipos de unión (Union Types)

Los tipos de unión te permiten representar valores que pueden ser de diferentes tipos.

function mostrarValor(valor: string | number): void {
  console.log(valor);
}

mostrarValor('Hola');

mostrarValor(123);

10. Tipos genéricos (Generics)

Los tipos genéricos te permiten escribir código que puede funcionar con diferentes tipos.

function obtenerPrimerElemento<T>(arreglo: T[]): T {
  return arreglo[0];
}

const primerNumero = obtenerPrimerElemento([1, 2, 3]); // number

const primerString = obtenerPrimerElemento(['a', 'b', 'c']); // string

Te dejo un video donde puedes comenzar con los básicos de JavaScript para despues pasarte a TypeScript

Conclusión

Estos son solo algunos de los códigos secretos y funcionales de TypeScript que puedes utilizar para mejorar tu productividad como desarrollador. ¡Explora la documentación de TypeScript para descubrir aún más! Visita nuestro blog para más contenido de tecnologías, visita este post para mejorar tus diseños y éste otro para mejorar tu programación en JavaScript. Así pues tambien visita la comunidad oficial de TypeScript.

Scroll al inicio