Aprender TypeScript Sintaxis

TypeScript representa una evolución natural de JavaScript que incorpora un sistema de tipos estático opcional, permitiendo detectar errores durante el desarrollo antes de que el código se ejecute en producción. Esta característica fundamental transforma la experiencia de programación, proporcionando mayor seguridad y herramientas de desarrollo más sofisticadas.

Fundamentos del sistema de tipos

La sintaxis de TypeScript extiende JavaScript añadiendo anotaciones de tipos que describen la forma y comportamiento esperado de los datos. Estas anotaciones actúan como contratos que el compilador verifica automáticamente.

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

El compilador de TypeScript analiza estas declaraciones y garantiza que las operaciones realizadas sobre las variables sean compatibles con sus tipos declarados. Si intentamos asignar un número a una variable de tipo string, el compilador generará un error antes de la ejecución.

Declaración de variables y constantes

TypeScript mantiene las palabras clave let, const y var de JavaScript, pero añade la capacidad de especificar tipos explícitamente. La inferencia de tipos permite que TypeScript deduzca automáticamente el tipo cuando no se especifica explícitamente.

// Tipo explícito
let precio: number = 99.99;

// Inferencia de tipos
let producto = "Laptop"; // TypeScript infiere que es string
let disponible = true;   // TypeScript infiere que es boolean

Las constantes en TypeScript pueden beneficiarse de tipos literales, donde el valor específico se convierte en el tipo:

const ESTADO = "pendiente"; // Tipo literal "pendiente"
const MAX_INTENTOS = 3;     // Tipo literal 3

Tipos primitivos y su aplicación

Los tipos primitivos de TypeScript incluyen string, number, boolean, null, undefined y symbol. Cada uno tiene características específicas que influyen en cómo se comporta el código.

let mensaje: string = "Bienvenido";
let temperatura: number = 23.5;
let confirmado: boolean = false;
let valor: null = null;
let indefinido: undefined = undefined;

El tipo number en TypeScript representa tanto enteros como decimales, siguiendo el estándar IEEE 754. Los literales numéricos pueden expresarse en diferentes bases:

let decimal: number = 42;
let hexadecimal: number = 0x2A;
let binario: number = 0b101010;
let octal: number = 0o52;

Arrays y su tipado

Los arrays en TypeScript pueden declararse de dos formas sintácticamente equivalentes. La elección entre una u otra suele depender de las preferencias del equipo de desarrollo.

// Sintaxis con corchetes
let numeros: number[] = [1, 2, 3, 4, 5];
let nombres: string[] = ["Juan", "María", "Carlos"];

// Sintaxis genérica
let precios: Array<number> = [10.99, 25.50, 8.75];
let ciudades: Array<string> = ["Madrid", "Barcelona", "Valencia"];

Los arrays pueden contener tipos mixtos utilizando uniones de tipos:

let mixto: (string | number)[] = ["texto", 42, "otro texto", 100];

Objetos y estructuras de datos

La tipificación de objetos en TypeScript permite definir la estructura exacta que debe tener un objeto, especificando qué propiedades son obligatorias y cuáles opcionales.

let usuario: {
  nombre: string;
  edad: number;
  email?: string; // Propiedad opcional
} = {
  nombre: "Pedro",
  edad: 30
};

Las propiedades opcionales se marcan con el símbolo ? después del nombre de la propiedad. Esto indica que la propiedad puede estar presente o no en el objeto.

Funciones y parámetros tipados

Las funciones en TypeScript pueden tener tipos especificados tanto para sus parámetros como para su valor de retorno. Esta característica mejora significativamente la documentación del código y previene errores comunes.

function calcularArea(ancho: number, alto: number): number {
  return ancho * alto;
}

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

Los parámetros por defecto combinan la funcionalidad de JavaScript con el sistema de tipos de TypeScript:

function crearUsuario(nombre: string, rol: string = "usuario"): object {
  return { nombre, rol, fechaCreacion: new Date() };
}

Uniones de tipos y flexibilidad

Las uniones de tipos permiten que una variable pueda ser de varios tipos diferentes, proporcionando flexibilidad manteniendo la seguridad de tipos.

let identificador: string | number;
identificador = "USR001";  // Válido
identificador = 12345;     // También válido

function procesar(entrada: string | number): string {
  if (typeof entrada === "string") {
    return entrada.toUpperCase();
  }
  return entrada.toString();
}

Esta característica resulta especialmente útil cuando trabajamos con APIs externas o datos que pueden llegar en diferentes formatos según el contexto.

Literales de tipo y precisión

Los tipos literales permiten especificar valores exactos como tipos, creando restricciones muy precisas sobre qué valores son aceptables.

let direccion: "norte" | "sur" | "este" | "oeste";
let estado: "activo" | "inactivo" | "pendiente";

function configurar(modo: "desarrollo" | "produccion"): void {
  if (modo === "desarrollo") {
    console.log("Modo desarrollo activado");
  }
}

Esta aproximación es particularmente valiosa para configuraciones y estados donde solo ciertos valores tienen sentido en el contexto de la aplicación.