TypeScript en 2 minutos: Guía Rápida de Tipado Inteligente

¿Eres desarrollador JavaScript y buscas asegurar tu código? ¡Bienvenido a esta guía rápida de TypeScript, el superconjunto de JavaScript que revolucionará tu forma de codificar!

🎯 ¿Por qué TypeScript?

TypeScript no es solo una herramienta de tipado - es tu mejor aliado para:

• Detectar errores antes de la ejecución
• Mejorar el mantenimiento del código
• Beneficiarte de un excelente autocompletado
• Facilitar el trabajo en equipo

🔑 Los Tipos Fundamentales

Aquí están los tipos que usarás diariamente:

typescript
1// Tipos primitivos
2const nombre: string = 'Alice';
3const edad: number = 25;
4const esDesarrollador: boolean = true;
5
6// Arrays
7const habilidades: string[] = ['TypeScript', 'React', 'Node.js'];
8
9// Objetos tipados
10interface Desarrollador {
11  nombre: string;
12  edad: number;
13  habilidades: string[];
14}
15
16const dev: Desarrollador = {
17  nombre: 'Alice',
18  edad: 25,
19  habilidades: ['TypeScript', 'React', 'Node.js'],
20};

🛡️ TypeScript en Acción

1. Funciones con Tipos

typescript
1// Función tipada con parámetros y retorno
2function calcularSalario(tarifaHora: number, horas: number = 35): number {
3  return tarifaHora * horas;
4}
5
6// Función flecha con tipo
7const saludar = (nombre: string): string => `¡Hola ${nombre}!`;

2. Tipos Avanzados

typescript
1// Union Types
2type EstadoProyecto = 'EN_CURSO' | 'TERMINADO' | 'EN_PAUSA';
3let estado: EstadoProyecto = 'EN_CURSO';
4
5// Tipos Genéricos
6interface Respuesta<T> {
7  datos: T;
8  estado: number;
9}
10
11const respuestaAPI: Respuesta<Desarrollador> = {
12  datos: dev,
13  estado: 200,
14};

3. Null Safety con Optional Chaining

typescript
1interface Proyecto {
2  cliente?: {
3    nombre?: string;
4  };
5}
6
7const proyecto: Proyecto = {};
8const nombreCliente = proyecto.cliente?.nombre ?? 'Cliente Anónimo';

🚀 Consejos Pro

Type Guards para una Mayor Seguridad

typescript
1interface Admin {
2  rol: 'admin';
3  permisos: string[];
4}
5
6interface Usuario {
7  rol: 'usuario';
8  nivel: number;
9}
10
11function manejarUsuario(persona: Admin | Usuario) {
12  if (persona.rol === 'admin') {
13    console.log(persona.permisos); // TypeScript sabe que es un Admin
14  } else {
15    console.log(persona.nivel); // TypeScript sabe que es un Usuario
16  }
17}

Utility Types Esenciales

typescript
1// Partial - Hace todas las propiedades opcionales
2type DevParcial = Partial<Desarrollador>;
3
4// Pick - Selecciona ciertas propiedades
5type DevBasico = Pick<Desarrollador, 'nombre' | 'edad'>;
6
7// Omit - Excluye ciertas propiedades
8type DevSinHabilidades = Omit<Desarrollador, 'habilidades'>;

🎓 Para Ir Más Allá

• Usa strict: true en tu tsconfig.json
• Instala extensiones VS Code para TypeScript
• Practica con proyectos reales
• Explora los tipos genéricos avanzados

🏁 Conclusión

TypeScript no es solo una herramienta más - es una inversión en la calidad de tu código. En pocos minutos, has descubierto las bases que te permitirán codificar con más seguridad. ¿Listo para transformar tu JavaScript en TypeScript? ¡Adelante! 🚀

¡No dudes en compartir este artículo si te ha resultado útil! ¡Hasta pronto para más consejos de desarrollo! 👋