TypeScript Fácil · Teoría
24 lecciones originales con ejemplos breves, puntos clave y referencias para profundizar.
TypeScript amplía la sintaxis de JavaScript con tipos estáticos y elimina esas anotaciones al emitir JavaScript. No cambia por sí solo las capacidades del runtime.
const mensaje: string = "Hola desde TypeScript";
console.log(mensaje);El compilador analiza sintaxis, opciones y relaciones de tipos antes de emitir. Un diagnóstico incluye un código estable como TS2322 y una explicación localizada.
const edad: number = "veinte"; // TS2322TypeScript infiere tipos desde valores y contexto. Una anotación es útil cuando expresa un contrato que la inicialización no puede comunicar por sí sola.
let puntos = 10;
const etiqueta: string = "nivel";string, number, boolean, bigint, symbol, null y undefined describen los primitivos de JavaScript. Los nombres String o Number representan wrappers y no son la opción habitual.
const activo: boolean = true;
const total: number = 12.5;T[] y Array<T> describen arrays cuyos elementos comparten un contrato. readonly T[] evita mutaciones a través de esa referencia.
const notas: number[] = [7, 9];
const nombres: readonly string[] = ["Ana", "Leo"];Una tupla fija tipos por posición y puede nombrar sus elementos para documentar el contrato. No equivale a un array homogéneo de longitud desconocida.
const punto: [x: number, y: number] = [3, 5];Un tipo de objeto enumera propiedades y sus tipos. TypeScript compara la estructura disponible, no exige una clase nominal.
const usuario: { nombre: string; activo: boolean } = { nombre: "Ada", activo: true };Los parámetros y el retorno forman el contrato de una función. void expresa que el resultado no se utiliza, no que la función sea incapaz de devolver internamente.
function sumar(a: number, b: number): number { return a + b; }Un parámetro con ? puede ser undefined; un valor predeterminado lo vuelve opcional para quien llama y aporta un valor dentro de la función.
function saludar(nombre = "persona", titulo?: string) { return titulo ? `${titulo} ${nombre}` : nombre; }Una unión A | B acepta valores de cualquiera de sus miembros, pero sólo permite operaciones seguras para todos hasta aplicar narrowing.
function longitud(valor: string | string[]) { return valor.length; }Un literal como 'pendiente' es un tipo más preciso que string. Las uniones de literales modelan estados cerrados y evitan cadenas arbitrarias.
type Estado = "pendiente" | "completado";
const estado: Estado = "pendiente";type asigna un nombre reutilizable a cualquier tipo, incluidas uniones, tuplas y primitivas. No crea un valor ni una validación de runtime.
type Identificador = string | number;
const id: Identificador = "A-1";interface nombra principalmente formas de objeto y puede extenderse o fusionarse. Para una unión se necesita type.
interface Perfil { nombre: string; edad: number; }? permite ausencia y readonly impide escribir mediante esa vista. Ninguno valida objetos recibidos en runtime ni congela estructuras anidadas.
interface Configuracion { readonly id: string; tema?: "claro" | "oscuro"; }Con strictNullChecks, null y undefined no pertenecen automáticamente a todos los tipos. Deben aparecer en el contrato y eliminarse mediante una comprobación.
function mayusculas(texto: string | null) { return texto === null ? "" : texto.toUpperCase(); }Comprobar typeof crea una rama donde TypeScript conoce un miembro más preciso de la unión.
function doble(valor: number | string) { return typeof valor === "number" ? valor * 2 : valor + valor; }Las comparaciones estrictas pueden relacionar uniones y eliminar null. Truthiness es útil, pero también descarta 0 y cadenas vacías, quizá válidos.
function mostrar(valor: string | null) { if (valor !== null) console.log(valor); }in distingue objetos por propiedades y instanceof usa la cadena de prototipos de runtime. Ambos deben corresponder a diferencias reales observables.
class ErrorDeRed { codigo = 500; }
function codigo(error: ErrorDeRed | { mensaje: string }) { return "codigo" in error ? error.codigo : 0; }as T indica al compilador una interpretación compatible, pero no convierte ni comprueba el valor. Debe reservarse para información real que el análisis no conoce.
const entrada: unknown = "texto";
const longitud = (entrada as string).length;TypeScript tipa campos, constructor y métodos de las clases JavaScript. La inicialización estricta exige asignar campos obligatorios.
class Contador { valor = 0; incrementar(): number { return ++this.valor; } }public, protected y private de TypeScript controlan acceso estático. private se borra al emitir; #campo es privacidad nativa de JavaScript.
class Cuenta { constructor(private saldo: number) {} consultar() { return this.saldo; } }Un archivo con import o export es un módulo con ámbito propio. TypeScript resuelve y comprueba sus dependencias según module y moduleResolution.
export type Usuario = { nombre: string };
export const activo = true;tsconfig define archivos del proyecto y opciones del compilador. target controla el JavaScript emitido; module y moduleResolution describen sistemas distintos que deben coordinarse.
{ "compilerOptions": { "target": "ES2020", "module": "ESNext" } }strict activa una familia de comprobaciones como strictNullChecks, noImplicitAny y strictFunctionTypes. Es una base de diseño, no un paso cosmético al final.
function etiqueta(valor: unknown): string { return typeof valor === "string" ? valor : "desconocido"; }