TypeScript - Aprende desde Cero

¡Bienvenido a TypeScript! 👋

TypeScript es un lenguaje de programación desarrollado por Microsoft que extiende JavaScript añadiendo tipos estáticos opcionales.

¿Por qué aprender TypeScript?

🛡️ Seguridad de tipos

Detecta errores antes de ejecutar el código

📝 Mejor autocompletado

IDE más inteligente y productivo

🔧 Refactorización segura

Cambia código con confianza

📚 Mejor documentación

El código se autodocumenta

¿Qué es TypeScript?

// JavaScript tradicional
function sumar(a, b) {
    return a + b;
}

sumar(5, "10"); // "510" - ¡Error inesperado!

// TypeScript
function sumar(a: number, b: number): number {
    return a + b;
}

sumar(5, "10"); // ❌ Error en tiempo de compilación
sumar(5, 10);   // ✅ 15
                

🎮 Tu Progreso de Aprendizaje

Completa las lecciones para aumentar tu progreso

🛠️ Instalación Rápida

// Instalar TypeScript globalmente
npm install -g typescript

// Verificar instalación
tsc --version

// Compilar archivo TypeScript
tsc index.ts

// Ejecutar
node index.js
                

📚 Fundamentos de TypeScript

1. Tipos Primitivos

// String
let nombre: string = "Ana";

// Number
let edad: number = 25;
let precio: number = 19.99;

// Boolean
let esActivo: boolean = true;

// Any - usar con precaución
let cualquierCosa: any = "texto";
                

2. Arrays y Tuplas

// Arrays
let numeros: number[] = [1, 2, 3, 4, 5];
let nombres: Array<string> = ["Ana", "Luis"];

// Tuplas
let persona: [string, number] = ["Ana", 25];
                

3. Interfaces

// Interface
interface Usuario {
    nombre: string;
    edad: number;
    email: string;
}

const usuario1: Usuario = {
    nombre: "María",
    edad: 30,
    email: "maria@example.com"
};
                

🎯 Práctica: Define una Interface

Escribe tu interface y valídala

4. Funciones

// Función con tipos
function sumar(a: number, b: number): number {
    return a + b;
}

// Arrow function
const restar = (a: number, b: number): number => a - b;

// Parámetros opcionales
function saludar(nombre: string, apellido?: string): string {
    return apellido ? `Hola ${nombre} ${apellido}` : `Hola ${nombre}`;
}
                

🧪 Quiz de Tipos

¿Qué tipo de datos NO es primitivo en TypeScript?

A) string

B) number

C) array

D) boolean

🚀 Conceptos Avanzados

1. Clases

class Persona {
    private nombre: string;
    public edad: number;

    constructor(nombre: string, edad: number) {
        this.nombre = nombre;
        this.edad = edad;
    }

    public presentarse(): string {
        return `Hola, soy ${this.nombre}`;
    }
}

const persona = new Persona("Juan", 30);
                

2. Genéricos

// Función genérica
function obtenerPrimero<T>(array: T[]): T {
    return array[0];
}

const numeros = [1, 2, 3];
const primero = obtenerPrimero(numeros); // number

// Clase genérica
class Caja<T> {
    private contenido: T;

    constructor(contenido: T) {
        this.contenido = contenido;
    }

    obtener(): T {
        return this.contenido;
    }
}
                

3. Utility Types

interface Usuario {
    id: number;
    nombre: string;
    email: string;
}

// Partial - hace propiedades opcionales
type UsuarioParcial = Partial<Usuario>;

// Pick - selecciona propiedades
type UsuarioBasico = Pick<Usuario, "id" | "nombre">;

// Readonly - solo lectura
type UsuarioInmutable = Readonly<Usuario>;
                

🎯 Desafío: Crea una Clase Genérica

Implementa la cola genérica

💪 Proyectos Prácticos

🎯 Proyecto: Sistema de Tareas

interface Tarea {
    id: number;
    titulo: string;
    completada: boolean;
}

class GestorTareas {
    private tareas: Tarea[] = [];
    private siguienteId: number = 1;

    agregar(titulo: string): Tarea {
        const nuevaTarea: Tarea = {
            id: this.siguienteId++,
            titulo,
            completada: false
        };
        this.tareas.push(nuevaTarea);
        return nuevaTarea;
    }

    completar(id: number): boolean {
        const tarea = this.tareas.find(t => t.id === id);
        if (tarea) {
            tarea.completada = true;
            return true;
        }
        return false;
    }

    listar(): Tarea[] {
        return this.tareas;
    }
}

const gestor = new GestorTareas();
gestor.agregar("Estudiar TypeScript");
console.log(gestor.listar());
                

📋 Checklist de Dominio

Tipos básicos Interfaces Funciones tipadas Clases Genéricos

Tu progreso: 0%