¿Qué es TypeScript? Tutorial de TypeScript con ejemplos

¿Qué es TypeScript? Es JavaScript con tipos estáticos. Añades anotaciones de tipo a variables, parámetros y valores de retorno, el compilador de TypeScript las comprueba antes de que el programa se ejecute y genera JavaScript normal sin los tipos. Ese JavaScript funciona en cualquier sitio donde funcione JavaScript: navegadores, Node.js, Deno y Bun. Este tutorial de TypeScript lo muestra con ejemplos que puedes ejecutar.

Aquí tienes un pequeño programa en TypeScript. Pulsa Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Salida:

Ada is 36 years old
82.33333333333333

Salvo lo que va después de los dos puntos (: string, : User, : number[]) y la interface, esto es JavaScript. Esas adiciones le dicen al compilador qué puede ser cada valor. Fíjate en que total no tiene anotación: TypeScript deduce por sí solo que es un número. La mayor parte del código TypeScript anota los límites de las funciones y deja que el compilador infiera el resto.

Qué detecta el comprobador de tipos

El sentido de las anotaciones es que los errores aparezcan mientras escribes el código, no cuando un usuario se los encuentra. Ejecuta este bloque y lee la salida:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

El programa nunca arranca. En su lugar, el compilador imprime dos errores:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Cada error indica el archivo, la línea y la columna, un código de error (TS2322) y qué está mal. En JavaScript puro las dos líneas se ejecutarían, y la segunda imprimiría Linus is undefined years old sin ningún aviso. En un editor como VS Code, los mismos errores aparecen subrayados en rojo mientras escribes, junto con un autocompletado que sabe que user tiene exactamente un name y un age.

Errores típicos que detecta el comprobador:

• Un nombre de propiedad o método mal escrito (user.nmae, list.lenght).
• Llamar a una función con pocos o demasiados argumentos, o con argumentos del tipo equivocado.
• Usar un valor que podría ser null o undefined sin comprobarlo antes.
• Olvidar tratar un caso de una unión como "loading" | "done" | "error", cuando el código usa una comprobación exhaustiva.
• Código que se rompe cuando una función de la que depende cambia su firma.

Los tipos desaparecen en tiempo de ejecución

Los tipos de TypeScript solo existen en tiempo de compilación. El compilador los comprueba y luego los quita: el JavaScript que genera no tiene anotaciones ni interfaces, y se ejecuta exactamente igual que el JavaScript escrito a mano.

Esta entrada:

function double(n: number): number {
    return n * 2;
}

se convierte en esta salida:

function double(n) {
    return n * 2;
}

Por eso TypeScript no puede comprobar valores que llegan mientras el programa se ejecuta. Aquí el texto JSON dice ser un User, el compilador tiene que fiarse de esa afirmación y nada se queja tampoco en tiempo de ejecución:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Salida:

string
thirty-six1

Los datos que vienen de fuera del programa (respuestas de APIs, entradas de formularios, archivos) necesitan una comprobación en tiempo de ejecución, por ejemplo una función type guard que inspeccione el valor. Después TypeScript confía en esa comprobación y estrecha el tipo por ti.

Quién creó TypeScript y por qué

TypeScript se creó en Microsoft, con Anders Hejlsberg (el diseñador de C#) al frente del diseño. Se publicó en octubre de 2012 como versión 0.8, y la 1.0 llegó en abril de 2014. Es código abierto con licencia Apache 2.0 y se desarrolla en GitHub. Según el recuento de contribuidores mensuales de GitHub, TypeScript pasó a ser el lenguaje más usado en GitHub en agosto de 2025, por delante de Python y JavaScript.

La motivación fueron las bases de código JavaScript grandes. JavaScript no tiene forma de decir "esta función recibe un objeto usuario", así que renombrar una propiedad o cambiar una función obligaba a buscar en todo el código y esperar que los tests cubrieran cada llamada. TypeScript añade esa información manteniendo la compatibilidad total con JavaScript:

• Es un superconjunto. El JavaScript válido es sintaxis TypeScript válida, así que un proyecto puede migrar archivo a archivo.
• Sigue a JavaScript. Salvo algunas adiciones tempranas como enum y namespace, TypeScript no añade funcionalidades propias en tiempo de ejecución; la sintaxis nueva viene del estándar de JavaScript.
• Los tipos no cuestan nada en tiempo de ejecución. Se borran, así que la salida es tan rápida como el JavaScript escrito a mano.

La versión mayor actual es TypeScript 7, cuyo compilador se reescribió en Go como programa nativo y comprueba los tipos de proyectos grandes unas diez veces más rápido que el compilador basado en JavaScript al que sustituyó. La página de TypeScript 7 explica qué cambió.

¿Para qué sirve TypeScript? Frontend y backend

TypeScript se usa para el mismo software que JavaScript, tanto en el frontend como en el backend. Como la salida es JavaScript, TypeScript va a donde va JavaScript:

El mismo lenguaje cubre los dos lados de una aplicación web, y por eso muchos equipos comparten definiciones de tipos (por ejemplo, la forma de una respuesta de la API) entre el código del servidor y el del navegador.

Cómo el código TypeScript se convierte en JavaScript

Hay dos trabajos distintos, y cada uno lo hacen herramientas diferentes:

1. Comprobar tipos. Solo lo hace el compilador de TypeScript, normalmente con el comando tsc (deno check de Deno ejecuta una copia del mismo compilador). Lee tus archivos .ts, informa de los errores y, por defecto, también escribe archivos .js.
2. Quitar los tipos. Puede hacerlo tsc, y también herramientas más rápidas que se saltan por completo la comprobación de tipos: esbuild, SWC, Babel y el type stripping integrado en Node.js, Deno y Bun.

Una configuración habitual usa una herramienta rápida para ejecutar el código y tsc --noEmit (solo comprobar, sin escribir nada) en el editor y en CI. Instalar tsc y ejecutar un archivo .ts tienen cada uno su propia página en este capítulo.

Las funcionalidades principales en un ejemplo

El TypeScript del día a día usa un conjunto pequeño de funcionalidades. Este bloque reúne las principales:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Salida:

Ada ada@example.com
Ada can log in
Linus is banned

• Anotaciones de tipo (name: string): indican qué contiene una variable, un parámetro, una propiedad o un valor de retorno.
• Inferencia de tipos: rellena los tipos que omites; account recibe su tipo de lo que devuelve first.
• Interfaces y alias de tipo (interface Account, type Status): ponen nombre a la forma de tus datos.
• Tipos unión ("active" | "banned", T | undefined): describen un valor que es una de varias cosas.
• Estrechamiento (narrowing): después de una comprobación como account !== undefined, el compilador sabe qué caso se aplica dentro del bloque.
• Propiedades opcionales (email?: string): pueden faltar, así que su tipo incluye undefined.
• Genéricos (first<T>): permiten que una función o un tipo funcione con muchos tipos manteniéndolos conectados; entra un array de Account y sale un Account.

¿Hay que aprender JavaScript primero?

Ayuda, pero puedes aprender los dos a la vez. Todo lo que determina cómo se comporta el código TypeScript en tiempo de ejecución (variables, funciones, objetos, arrays, promesas, clases) es JavaScript, y TypeScript añade una capa que describe esos valores. Si ya sabes JavaScript, lo nuevo es el sistema de tipos: anotaciones, interfaces, uniones, genéricos y estrechamiento. Si empiezas de cero con los dos, aprende primero lo básico de los valores y las funciones de JavaScript y ve añadiendo tipos sobre la marcha; los mensajes de error del compilador enseñan bien, porque señalan la línea exacta donde un valor se usa de forma incorrecta.

Un orden práctico para aprender TypeScript: instálalo y ejecuta un primer archivo, aprende los tipos básicos y los tipos de objeto, luego los tipos unión y el estrechamiento, y después las funciones y los genéricos. Con eso cubres la mayor parte del código de una aplicación.