Israel Morales

Posted on Dec 2

Tipos en TypeScript: De lo básico a lo avanzado 🛠️🚀

TypeScript se caracteriza por su sistema de tipos fuerte 🛡️, que te permite especificar de forma clara y precisa cómo deben usarse los datos en tu aplicación 📋. Desde elementos básicos como palabras (string) y números (number), hasta herramientas más avanzadas como tipos de unión y enumeraciones, TypeScript te asegura que puedas escribir código de manera más segura y predecible 🚀.

¿Cómo se utiliza el sistema de tipos en TypeScript? 🤔

TypeScript añade protección de tipos a JavaScript con una sintaxis fácil ✍️ pero poderosa 💪, aquí algunas ideas importantes:

Anotaciones de tipo en variables 🖋️

Para especificar el tipo de una variable, usa el operador : después del nombre de la variable:

let nombre: string = "Alice";
let edad: number = 30;
let activo: boolean = true;

Tipado en funciones 🛠️

Especifica el tipo de los parámetros y el tipo del valor de retorno:

function saludar(nombre: string): string {
  return `Hola, ${nombre}`;
}

📝 nombre: string: El parámetro debe ser una cadena.
📝 : string: La función devuelve una cadena.

Uso de tipos básicos en estructuras 📂

Puedes usar tipos en objetos, arreglos y tuplas:

let usuario: { nombre: string; edad: number } = { nombre: "Alice", edad: 30 };
let lista: number[] = [1, 2, 3];
let coordenada: [number, number] = [10, 20];

Tipos básicos en TypeScript 🔤

`string`

El tipo string se utiliza para manejar texto 📝.

let mensaje: string = "Hola, TypeScript";
console.log(mensaje); 
// Hola, TypeScript

`number`

TypeScript utiliza un solo tipo para todos los números (enteros y decimales) 🔢.

let pi: number = 3.14159;
let edad: number = 25;

`boolean`

Este tipo representa valores true o false ✅❌.

let esActivo: boolean = true;
let completado: boolean = false;

Tipos avanzados en TypeScript 🚀

Unión 🔗

Los union types permiten que una variable tenga más de un tipo.

let valor: number | string;
valor = 42; // ✅ Válido
valor = "Texto"; // ✅ También válido

Cómo se usa en una función:

const imprimirValor = (dato: string | number): void => {
  if (typeof dato === "string") {
    console.log(`Texto: ${dato}`);
  } 
  else {
    console.log(`Número: ${dato}`);
  }
};

Literales 🏷️

Los tipos literales restringen una variable a valores específicos.

let respuesta: "sí" | "no" | "quizás";
respuesta = "sí"; // ✅ Válido
// respuesta = "tal vez"; // ❌ Error

Tuplas 📦

Las tuplas son arreglos con un número fijo de elementos, donde cada posición tiene un tipo específico.

let persona: [string, number] = ["Alice", 30];
// persona = [30, "Alice"]; // ❌ Error

Enums 📋

Los enums definen un conjunto de constantes con nombre.

enum EstadoPedido {
  Pendiente,
  Enviado,
  Entregado,
}

let estado: EstadoPedido = EstadoPedido.Enviado;
console.log(estado); // 1

Sintaxis adicional para trabajar con tipos 🛠️

Objetos 🏗️

Para manejar objetos complejos, define su estructura con anotaciones de tipo:

let producto: { nombre: string; precio: number } = {
  nombre: "Laptop",
  precio: 1200,
};

Propiedades opcionales ❓

Usa ? para indicar que una propiedad es opcional:

type Usuario = {
  nombre: string;
  email?: string; // Opcional
};

let usuario1: Usuario = { nombre: "Alice" }; // ✅ Válido
let usuario2: Usuario = { nombre: "Bob", email: "bob@example.com" }; // ✅ Válido

Uso de readonly 🔒

El modificador readonly hace que una propiedad sea inmutable:

type Punto = {
  readonly x: number;
  readonly y: number;
};

let punto: Punto = { x: 10, y: 20 };
// punto.x = 15; // ❌ Error

Conclusión 🎯

El sistema de tipos de TypeScript es una herramienta muy útil 🛠️ para escribir código de forma segura, clara y fácil de mantener 🔒✨. Comprender la estructura fundamental para establecer valores y manejar tipos te ayudará a sacarle el mayor provecho a las capacidades de TypeScript, ya sea en proyectos sencillos o en aplicaciones más complejas 🚀.

DEV Community