Introducción a TypeScript para Principiantes: Guía 2026

# Introducción a TypeScript para Principiantes: Guía 2026

TypeScript se ha convertido en el estándar de la industria para proyectos JavaScript profesionales. Si sabes JavaScript, aprender TypeScript es el siguiente paso lógico.

Esta guía te enseña qué es TypeScript y cómo empezar a usarlo hoy mismo.

---

¿Qué es TypeScript?

Relación con JavaScript

Todo JavaScript válido es TypeScript válido
TypeScript = JavaScript + Tipos

Creado por Microsoft

• Lanzado en 2012
• Código abierto y gratuito
• Usado por Angular, Vue 3, React (opcional)

---

¿Por Qué Usar TypeScript?

1. Detecta Errores Antes

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

sumar(5, "10"); // "510" 😱 Error silencioso

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

sumar(5, "10"); // ❌ Error en tiempo de desarrollo
// Argument of type 'string' is not assignable to parameter of type 'number'

2. Autocompletado Inteligente

Tu editor sabe exactamente qué propiedades y métodos existen:

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

const usuario: Usuario = {
  nombre: "Ana",
  edad: 25
};

usuario. // ← Tu editor sugiere: nombre, edad

3. Código Autodocumentado

// Sin TypeScript
function crearUsuario(data) {
  // ¿Qué propiedades tiene 'data'? 🤷
}

// Con TypeScript
function crearUsuario(data: {
  nombre: string;
  email: string;
  edad?: number; // opcional
}) {
  // Ahora sé exactamente qué espera la función
}

4. Refactorización Segura

Cambia un nombre y TypeScript te muestra todos los lugares donde hay que actualizarlo.

---

Instalación y Configuración

Instalar TypeScript

npm install -g typescript

Verificar Instalación

tsc --version
# Version 5.3.3

Crear Proyecto

mkdir mi-proyecto-ts
cd mi-proyecto-ts
npm init -y
npm install --save-dev typescript

Inicializar TypeScript

npx tsc --init

Esto crea tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  }
}

---

Tipos Básicos

Primitivos

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

// Number
let edad: number = 25;

// Boolean
let activo: boolean = true;

// Array
let numeros: number[] = [1, 2, 3];
let frutas: Array<string> = ["manzana", "pera"];

// Tuple (array con tipos fijos)
let persona: [string, number] = ["Ana", 25];

Any (evitar cuando sea posible)

let cualquierCosa: any = "hola";
cualquierCosa = 123; // OK
cualquierCosa = true; // OK
// ⚠️ Pierde los beneficios de TypeScript

Unknown (más seguro que any)

let valor: unknown = "hola";

// Necesitas verificar el tipo antes de usar
if (typeof valor === "string") {
  console.log(valor.toUpperCase());
}

Void y Never

function log(mensaje: string): void {
  console.log(mensaje);
  // No retorna nada
}

function error(mensaje: string): never {
  throw new Error(mensaje);
  // Nunca retorna (lanza error)
}

---

Interfaces y Types

Interface - Definir Estructura de Objetos

interface Usuario {
  id: number;
  nombre: string;
  email: string;
  edad?: number; // opcional (?)
}

const usuario: Usuario = {
  id: 1,
  nombre: "Carlos",
  email: "carlos@example.com"
  // edad es opcional
};

Type Alias - Tipos Personalizados

type ID = string | number;
type Rol = "admin" | "user" | "guest";

interface Empleado {
  id: ID;
  rol: Rol;
}

const empleado: Empleado = {
  id: "E001",
  rol: "admin"
};

Diferencia Interface vs Type

// Interface se puede extender
interface Animal {
  nombre: string;
}

interface Perro extends Animal {
  raza: string;
}

// Type es más flexible
type Color = "rojo" | "azul" | "verde";
type Coordenada = [number, number];

---

Funciones con Tipos

Tipado de Parámetros y Retorno

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

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

// Parámetros por defecto
function incrementar(num: number, cantidad: number = 1): number {
  return num + cantidad;
}

Arrow Functions

const multiplicar = (a: number, b: number): number => a  b;

const procesar = (items: string[]): void => {
  items.forEach(item => console.log(item));
};

class Persona {
  // Propiedades
  nombre: string;
  edad: number;

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

  // Método
  saludar(): string {
    return Hola, soy ${this.nombre};
  }
}

const persona = new Persona("Ana", 30);
console.log(persona.saludar());

class CuentaBancaria {
  public titular: string;        // accesible desde cualquier lugar
  private balance: number;        // solo dentro de la clase
  protected banco: string;        // clase e hijos

  constructor(titular: string, balance: number) {
    this.titular = titular;
    this.balance = balance;
    this.banco = "Mi Banco";
  }

  public getBalance(): number {
    return this.balance;
  }

  private calcularInteres(): number {
    return this.balance  0.05;
  }
}

Forma Corta (Constructor)

class Usuario {
  // Declaración y asignación en una línea
  constructor(
    public id: number,
    public nombre: string,
    private password: string
  ) {}
}

const user = new Usuario(1, "Ana", "secret");
console.log(user.nombre); // OK
console.log(user.password); // ❌ Error: property is private

---

Generics - Tipos Reutilizables

Función Genérica

// Sin generics - necesitas múltiples funciones
function primerElementoString(arr: string[]): string {
  return arr[0];
}

function primerElementoNumber(arr: number[]): number {
  return arr[0];
}

// Con generics - una función para todos
function primerElemento<T>(arr: T[]): T {
  return arr[0];
}

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

Interface Genérica

interface Respuesta<T> {
  data: T;
  status: number;
  mensaje: string;
}

const respuestaUsuario: Respuesta<Usuario> = {
  data: { id: 1, nombre: "Ana", email: "ana@example.com" },
  status: 200,
  mensaje: "OK"
};

---

TypeScript con React

Componente Funcional Tipado

interface BotonProps {
  texto: string;
  onClick: () => void;
  disabled?: boolean;
}

const Boton: React.FC<BotonProps> = ({ texto, onClick, disabled }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {texto}
    </button>
  );
};

useState Tipado

const [count, setCount] = useState<number>(0);
const [usuario, setUsuario] = useState<Usuario | null>(null);

---

Compilar TypeScript

Comando Básico

tsc archivo.ts
# Genera archivo.js

Watch Mode (Desarrollo)

tsc --watch

Compilar Proyecto Completo

tsc
# Usa configuración de tsconfig.json

---

Errores Comunes de Principiantes

Error 1: Usar 'any' en Todas Partes

❌ Malo:

function procesar(data: any): any {
  return data;
}

✅ Bueno:

function procesar<T>(data: T): T {
  return data;
}

Error 2: No Tipar Funciones

❌ Malo:

const obtenerUsuarios = () => {
  // TypeScript infiere 'any'
}

✅ Bueno:

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

const obtenerUsuarios = (): Promise<Usuario[]> => {
  // Tipo explícito
}

Error 3: Ignorar Null/Undefined

interface Config {
  apiUrl?: string; // puede ser undefined
}

const config: Config = {};

// ❌ Puede causar error en runtime
console.log(config.apiUrl.length);

// ✅ Verificar primero
if (config.apiUrl) {
  console.log(config.apiUrl.length);
}

// ✅ O usar optional chaining
console.log(config.apiUrl?.length);

---

Herramientas Recomendadas

VS Code

Mejor editor para TypeScript:

• Autocompletado inteligente
• Errores en tiempo real
• Refactorización automática

ESLint + TypeScript

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Prettier

npm install --save-dev prettier

---

Recursos de Aprendizaje

Documentación Oficial

📚 typescriptlang.org/docs

Cursos Gratuitos

• TypeScript Handbook - Oficial
• Total TypeScript - Matt Pocock
• Execute Program - TypeScript track

Práctica

• TypeScript Playground - Prueba código online
• Exercism.io - Ejercicios interactivos

---

Conclusión

TypeScript mejora drásticamente tu experiencia de desarrollo:

✅ Detecta errores antes

✅ Mejor autocompletado

✅ Código autodocumentado

✅ Refactorización segura

✅ Requerido en proyectos profesionales

---

Recursos Relacionados

• JavaScript y JSON
• JSON a TypeScript
• ¿Qué es React?

---