TypeScript desde Cero — Tutorial Completo para Principiantes

TypeScript es JavaScript con tipado estático. En 2026 es prácticamente obligatorio en proyectos profesionales: React, Angular, Next.js, NestJS y Node.js lo usan de forma nativa. Si quieres trabajar como desarrollador web o mejorar la calidad de tu código JavaScript, aprender TypeScript es el siguiente paso natural. En este tutorial aprenderás TypeScript desde cero, en español.

¿Qué es TypeScript y por qué usarlo?

• Detección de errores en tiempo de compilación, no en producción
• Mejor autocompletado en VS Code y otros editores
• Código más legible y mantenible en equipos grandes
• Compatible con todo el ecosistema JavaScript existente
• Adoptado por React, Angular, Vue, Next.js, NestJS...

Instalación y configuración

npm install -g typescript
tsc --init  # Crea tsconfig.json

Configuración básica de tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Tipos básicos

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

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

// Tuplas
let coordenada: [number, number] = [40.4168, -3.7038];

// Enums
enum Rol { Admin = "ADMIN", Editor = "EDITOR", Lector = "LECTOR" }
let miRol: Rol = Rol.Admin;

// Any, Unknown, Never
let desconocido: unknown = 42;  // mas seguro que any

Interfaces y tipos

interface Usuario {
    id: number;
    nombre: string;
    email: string;
    rol?: Rol;          // opcional
    readonly creado: Date;  // solo lectura
}

// type puede usar uniones, interface puede extenderse
type Resultado = "exito" | "error" | "pendiente";

interface Admin extends Usuario {
    permisos: string[];
}

const usuario: Usuario = {
    id: 1,
    nombre: "Maria",
    email: "maria@ejemplo.com",
    creado: new Date()
};

Funciones tipadas

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

// Arrow function
const multiplicar = (a: number, b: number): number => a * b;

// Parametros opcionales y por defecto
function saludar(nombre: string, saludo: string = "Hola"): string {
    return `${saludo}, ${nombre}!`;
}

// Sobrecarga de funciones
function formatear(valor: string): string;
function formatear(valor: number): string;
function formatear(valor: string | number): string {
    return typeof valor === "number" ? valor.toFixed(2) : valor.trim();
}

Genéricos

// Funcion generica
function primero<T>(array: T[]): T | undefined {
    return array[0];
}

const num = primero([1, 2, 3]);        // tipo: number
const str = primero(["a", "b", "c"]); // tipo: string

// Interfaz generica
interface Respuesta<T> {
    datos: T;
    exito: boolean;
    mensaje: string;
}

// Restricciones de genericos
function obtenerPropiedad<T, K extends keyof T>(obj: T, clave: K): T[K] {
    return obj[clave];
}

const usuario = { nombre: "Ana", edad: 30 };
const nombre = obtenerPropiedad(usuario, "nombre");  // string

Clases en TypeScript

class Producto {
    private static _contador = 0;

    constructor(
        public readonly id: number = ++Producto._contador,
        public nombre: string,
        protected precio: number,
        private _stock: number = 0
    ) {}

    get stock(): number { return this._stock; }
    set stock(cantidad: number) {
        if (cantidad < 0) throw new Error("Stock no puede ser negativo");
        this._stock = cantidad;
    }

    toString(): string {
        return `[${this.id}] ${this.nombre} -- ${this.precio} EUR`;
    }
}

class ProductoDigital extends Producto {
    constructor(nombre: string, precio: number, public url: string) {
        super(undefined as any, nombre, precio, Infinity);
    }
}

Utilidades de TypeScript

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

type UsuarioParcial  = Partial<Usuario>;      // todas opcionales
type UsuarioCompleto = Required<UsuarioParcial>;// todas obligatorias
type SoloEmail       = Pick<Usuario, "email">;  // seleccionar campos
type SinEmail        = Omit<Usuario, "email">;  // excluir campos
type RolesUsuario    = Record<string, Rol[]>;   // clave-valor tipado

Conclusión

TypeScript hace el código más robusto y el equipo más productivo. Una vez que lo adoptas, es difícil volver a JavaScript puro. Continúa aprendiendo con nuestro tutorial de React Hooks donde usamos TypeScript en todos los ejemplos.