TypeScript añade un sistema de tipos estático sobre JavaScript. No reemplaza JavaScript ni crea un entorno de ejecución nuevo: el código termina ejecutándose como JavaScript, mientras TypeScript intenta detectar incompatibilidades antes de que el programa llegue al navegador, Node.js u otro runtime.
Esta URL recibió 7 impresiones en la ventana de 90 días revisada, incluidas búsquedas de TypeScript para principiantes. Existe además otra página de Crezendo sobre una introducción a TypeScript aplicada a JavaScript con contenido casi idéntico y sin impresiones propias. Por eso esta guía se convierte en el pilar único de introducción a TypeScript y la página duplicada se consolida aquí.
Antes de TypeScript, entiende JavaScript
La documentación oficial de TypeScript lo plantea con claridad: TypeScript comparte la sintaxis y el comportamiento de ejecución de JavaScript. Aprender TypeScript sin comprender variables, funciones, objetos, arrays, módulos, promesas y el modelo básico de JavaScript suele convertir los mensajes del compilador en reglas que se memorizan sin entender qué programa se ejecutará realmente.
No necesitas ser experto en JavaScript. Sí conviene poder escribir y explicar una función sencilla antes de intentar tiparla.
Qué problema resuelve TypeScript
En JavaScript es válido escribir:
function total(precio, cantidad) {
return precio * cantidad;
}
Nada en esa función expresa qué valores espera. Si otra parte del programa llama total("10", 2), JavaScript aplicará sus reglas de coerción durante la ejecución.
En TypeScript puedes declarar la intención:
function total(precio: number, cantidad: number): number {
return precio * cantidad;
}
Ahora el comprobador puede señalar una llamada incompatible antes de ejecutar el código.
Eso no significa que TypeScript pruebe que el programa es correcto. Puede detectar muchas inconsistencias de tipos, pero no sabe por sí solo si una fórmula de negocio es correcta, si un servidor respondió datos falsos o si una contraseña se manejó de forma segura.
Instálalo dentro del proyecto
La documentación oficial recomienda instalar TypeScript por proyecto para que cada repositorio pueda declarar la versión que utiliza.
Con Node.js y npm:
npm install --save-dev typescript
Puedes comprobar el compilador del proyecto con:
npx tsc --version
Y crear una configuración inicial con:
npx tsc --init
Evita depender de una instalación global como única fuente de verdad para un proyecto compartido. Una dependencia local y el lockfile del gestor de paquetes hacen más reproducible el entorno entre personas y CI.
La referencia oficial está en TypeScript: Download.
Empieza con inferencia antes de llenar todo de anotaciones
TypeScript puede inferir muchos tipos:
const nombre = "Ana";
const intentos = 3;
No necesitas escribir:
const nombre: string = "Ana";
const intentos: number = 3;
si la anotación no agrega información.
Las anotaciones son especialmente útiles en límites del programa: parámetros de funciones, retornos importantes, estructuras compartidas, contratos de módulos y datos que podrían ser ambiguos.
Objetos: type e interface
Puedes describir la forma esperada de un objeto:
type Producto = {
id: number;
nombre: string;
precio: number;
disponible: boolean;
};
function mostrarProducto(producto: Producto) {
return `${producto.nombre}: ${producto.precio}`;
}
También puedes utilizar interface:
interface Usuario {
id: number;
correo: string;
activo: boolean;
}
No necesitas convertir la diferencia entre type e interface en una guerra de estilo. Aprende primero qué estructura necesitas expresar y utiliza consistentemente la convención del proyecto.
Propiedades opcionales y uniones
Una propiedad puede ser opcional:
type Perfil = {
nombre: string;
telefono?: string;
};
Y una variable puede admitir varias posibilidades explícitas:
type Estado = "pendiente" | "procesando" | "completado" | "error";
Las uniones son más útiles cuando obligan al código a considerar estados reales. Evita convertirlas en listas gigantes de valores sin relación sólo para silenciar un error del compilador.
Aprende unknown antes de abusar de any
any básicamente le dice al comprobador que deje de ayudarte en esa parte del código.
Cuando recibes un valor cuyo tipo todavía no conoces, unknown puede ser una alternativa más segura:
function imprimir(valor: unknown) {
if (typeof valor === "string") {
console.log(valor.toUpperCase());
}
}
El chequeo con typeof reduce el tipo antes de utilizar operaciones de string. Este proceso se conoce como narrowing.
La documentación oficial dedica una sección completa a Narrowing.
TypeScript no valida automáticamente datos externos
Este punto es fundamental.
Supón que una API devuelve JSON. Puedes escribir:
const usuario = respuesta as Usuario;
pero as Usuario no transforma ni valida los datos durante la ejecución. Sólo cambia lo que TypeScript cree sobre el valor.
En fronteras externas —APIs, formularios, archivos, variables de entorno, mensajes de una cola— sigue siendo necesario validar los datos en runtime cuando su forma no está garantizada.
Un tipo estático y una validación de datos resuelven problemas relacionados, pero no equivalentes.
Activa reglas estrictas con criterio
Para proyectos nuevos, una configuración estricta suele revelar supuestos ocultos antes de que el código crezca.
En tsconfig.json, una opción central es:
{
"compilerOptions": {
"strict": true
}
}
En un proyecto JavaScript antiguo, activar todas las comprobaciones estrictas de golpe puede producir cientos o miles de errores. Una migración incremental puede ser mejor:
- establece una línea base que compile;
- añade TypeScript por proyecto;
- empieza por módulos con límites claros;
- reduce
anygradualmente; - añade comprobaciones más estrictas;
- ejecuta tests después de cada cambio importante.
La documentación oficial también describe una progresión para proyectos JavaScript que incorporan TypeScript.
Tipar funciones antes que memorizar utilidades avanzadas
Un principiante obtiene más valor aprendiendo bien parámetros, retornos y objetos que saltando inmediatamente a tipos condicionales complejos.
Prueba primero:
function aplicarDescuento(precio: number, porcentaje: number): number {
return precio * (1 - porcentaje / 100);
}
Luego agrega una estructura:
type Linea = {
precio: number;
cantidad: number;
};
function subtotal(linea: Linea): number {
return linea.precio * linea.cantidad;
}
Después introduce arrays, propiedades opcionales, uniones y genéricos sólo cuando el problema los necesite.
Un laboratorio pequeño para aprender de verdad
Toma un archivo JavaScript sencillo que gestione una lista de productos.
Paso 1: conserva una versión que funciona
Antes de migrar, ejecuta el programa y guarda algunos casos de prueba.
Paso 2: cambia .js a .ts
Deja que TypeScript infiera todo lo que pueda y observa los primeros errores.
Paso 3: tipa las fronteras
Define Producto, los parámetros de las funciones y los valores de retorno importantes.
Paso 4: elimina supuestos ambiguos
Si un producto puede no tener precio, decide qué significa realmente. No añadas simplemente | undefined a todo para que compile.
Paso 5: prueba datos incorrectos
Introduce un campo faltante, un texto donde esperabas un número y un estado desconocido. Observa qué detecta TypeScript y qué sólo puede detectarse durante ejecución.
Paso 6: documenta lo aprendido
Anota qué error habría llegado a runtime en JavaScript y cuál sigue necesitando validación o pruebas incluso con TypeScript.
Errores comunes al empezar
- Usar
anypara cada error. Resuelve el mensaje, pero elimina gran parte del valor del sistema de tipos. - Escribir
as Tipopara obligar al compilador. Una aserción no demuestra que el dato externo tenga esa forma. - Anotar cada variable obvia. Aprovecha la inferencia.
- Aprender TypeScript sin JavaScript. El código generado sigue obedeciendo las reglas de JavaScript.
- Confundir compilación con tests. Que
tsctermine sin errores no prueba la lógica del programa. - Migrar un repositorio grande de una vez. Reduce el cambio a módulos que puedas probar.
- Instalar globalmente y olvidar la versión del proyecto. Prefiere una dependencia local para builds reproducibles.
¿Necesitas un framework para aprender TypeScript?
No. Puedes comenzar con un pequeño proyecto Node.js o incluso con el Playground oficial. React, Angular, Vue y otros frameworks añaden conceptos propios que pueden ocultar qué parte del error pertenece a TypeScript y cuál al framework.
Primero aprende tipos, funciones, objetos, uniones y narrowing. Después resulta más fácil entender el TypeScript que usa cada ecosistema.
TypeScript y JavaScript deben coexistir en tu aprendizaje
La documentación oficial resume una idea esencial: no puedes aprender TypeScript ignorando JavaScript. Los métodos de arrays, promesas, closures, módulos y comportamiento del runtime siguen siendo JavaScript.
Consulta el Handbook oficial de TypeScript y la guía TypeScript for JavaScript Programmers para continuar.
Formación y Crezendo
Crezendo mantiene áreas relacionadas con programación y desarrollo de software, pero esta página no anuncia un curso permanente de TypeScript. La disponibilidad, nivel, duración y modalidad deben confirmarse.
Puedes revisar los talleres vigentes o consultar una necesidad concreta. Si ya programas en JavaScript, indica qué tipo de proyecto tienes y qué problemas quieres resolver con tipado estático.
