¿Cómo instalar y configurar TypeScript en tu computadora?

Instalar TypeScript en tu computadora requiere Node.js, npm, y un comando de instalación global que activa el compilador tsc.

En la lección anterior aprendiste qué es TypeScript y por qué empresas como Mercado Libre y FEMSA lo usan. Ahora vas a preparar tu entorno de trabajo para escribir y compilar código TypeScript desde cero.

Lo que necesitas antes de empezar

Antes de instalar TypeScript, confirma que tienes Node.js y npm en tu computadora. Abre tu terminal y ejecuta estos dos comandos:

node --version
npm --version

Si ves números de versión (por ejemplo, v20.11.0 y 10.2.4), estás listo. Si ves un error, descarga Node.js desde nodejs.org — la versión LTS es la más estable.

npm (Node Package Manager) es el gestor de paquetes que viene incluido con Node.js. Con npm instalas TypeScript y miles de otras herramientas.

Instalar TypeScript de forma global

La instalación global significa que el compilador tsc estará disponible en cualquier proyecto de tu computadora, sin repetir la instalación.

Ejecuta este comando en tu terminal:

npm install -g typescript

El flag -g indica instalación global. El proceso tarda entre 10 y 30 segundos según tu conexión.

Cuando termine, verifica la instalación:

tsc --version

Deberías ver algo como Version 5.4.5. Ese número confirma que TypeScript está activo y listo.

Crear tu primer proyecto TypeScript

Organiza tu trabajo en una carpeta dedicada. Ejecuta estos comandos uno por uno:

mkdir proyecto-ts
cd proyecto-ts
npm init -y

npm init -y crea un archivo package.json con configuración básica. Este archivo registra las dependencias y scripts de tu proyecto.

Ahora instala TypeScript también como dependencia de desarrollo dentro del proyecto:

npm install --save-dev typescript

¿Por qué instalar TypeScript dos veces, global y local? La instalación global te da el comando tsc en cualquier lugar. La instalación local garantiza que todos los miembros de tu equipo (por ejemplo, un equipo en Bimbo o Liverpool) usen exactamente la misma versión del compilador.

El archivo tsconfig.json

tsconfig.json es el archivo de configuración central de TypeScript. Le indica al compilador cómo transformar tus archivos .ts en JavaScript.

Genera un tsconfig.json base con este comando dentro de tu carpeta de proyecto:

tsc --init

Este comando crea el archivo con decenas de opciones comentadas. La mayoría están desactivadas por defecto. Las opciones más importantes para un principiante son:

Un tsconfig.json funcional para un proyecto nuevo en México se ve así:

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

Crea las carpetas src y dist manualmente:

mkdir src
mkdir dist

Todos tus archivos TypeScript irán dentro de src/. El compilador colocará los archivos JavaScript resultantes en dist/.

Compilar y ejecutar tu primer archivo .ts

Crea el archivo src/index.ts con este contenido:

const empresa: string = "FEMSA";
const empleados: number = 340000;
const salario: number = 18500;

console.log(`Empresa: ${empresa}`);
console.log(`Total de empleados: ${empleados}`);
console.log(`Salario promedio mensual: $${salario.toLocaleString("es-MX")}`);

Ahora compila el archivo con:

tsc

Ese comando lee tu tsconfig.json, toma todos los archivos en src/, y genera los archivos .js equivalentes en dist/.

Ejecuta el resultado compilado con Node.js:

node dist/index.js

Deberías ver en tu terminal:

Empresa: FEMSA
Total de empleados: 340000
Salario promedio mensual: $18,500

Felicidades: acabas de compilar y ejecutar tu primer programa TypeScript.

Compilación en modo observador

Recompilar manualmente cada vez que cambias código es lento. El modo watch resuelve esto.

Ejecuta:

tsc --watch

Ahora el compilador observa tus archivos en src/. Cada vez que guardas un cambio, recompila automáticamente. Esto acelera mucho el desarrollo.

Para detener el modo watch, presiona Ctrl + C en tu terminal.

Agregar ts-node para desarrollo rápido

ts-node es una herramienta que ejecuta archivos .ts directamente, sin necesidad de compilar primero a JavaScript. Es muy útil durante el desarrollo.

Instálalo como dependencia de desarrollo:

npm install --save-dev ts-node

Ahora puedes ejecutar tu archivo TypeScript directamente:

npx ts-node src/index.ts

Ves el mismo resultado que antes, pero sin generar archivos en dist/. Esto es ideal para pruebas rápidas.

Nota importante: ts-node es para desarrollo. En producción (por ejemplo, en un servidor de Mercado Libre), siempre compila con tsc y ejecuta el JavaScript generado.

Errores comunes

Error 1: tsc no se reconoce como comando

Esto ocurre cuando la instalación global no se registró correctamente en el PATH de tu sistema. Solución: cierra y vuelve a abrir tu terminal. Si persiste en Windows, ejecuta el instalador de Node.js nuevamente y marca la opción de agregar al PATH.

Error 2: rootDir y outDir no configurados

Si omites estas opciones en tsconfig.json, TypeScript coloca los archivos .js en la misma carpeta que los .ts. Tu proyecto se llena de archivos mezclados y se vuelve difícil de mantener. Configura siempre rootDir y outDir desde el inicio.

Error 3: Olvidar strict: true

Sin strict: true, TypeScript permite muchos errores de tipo que deberían bloquearse. Activar esta opción desde el principio es una buena práctica. Si trabajas en un equipo profesional (como los desarrolladores de FEMSA o Bimbo), los proyectos serios siempre usan strict: true.

Error 4: Mezclar instalación global y local

Algunos desarrolladores instalan TypeScript solo de forma global y omiten la dependencia local en package.json. Si otro desarrollador clona tu proyecto y ejecuta npm install, no obtendrá TypeScript. Instala siempre también como dependencia de desarrollo con --save-dev.

Estructura de carpetas recomendada

Después de seguir todos los pasos, tu proyecto debe verse así:

proyecto-ts/
├── dist/           ← Archivos JavaScript compilados (no editar)
├── src/
│   └── index.ts    ← Tu código TypeScript
├── node_modules/   ← Dependencias instaladas por npm
├── package.json
├── package-lock.json
└── tsconfig.json

Esta estructura es estándar en proyectos profesionales de Node.js con TypeScript. Mantenerla ordenada desde el inicio ahorra tiempo cuando el proyecto crece.

Resumen de comandos clave

Con tu entorno configurado correctamente, en las próximas lecciones podrás enfocarte en aprender la sintaxis de TypeScript sin interrupciones por problemas de configuración.