Tutorial TypeScript: Instalación y configuración de TypeScript

Instalación de Node.js y npm

Para comenzar a trabajar con TypeScript, necesitamos instalar Node.js y su gestor de paquetes npm (Node Package Manager). Estos componentes son fundamentales para el desarrollo con TypeScript, ya que nos permitirán instalar el compilador y ejecutar nuestros programas.

¿Qué es Node.js y npm?

Node.js es un entorno de ejecución para JavaScript basado en el motor V8 de Chrome que nos permite ejecutar código JavaScript fuera del navegador. Por su parte, npm es el gestor de paquetes que viene incluido con Node.js y nos facilita la instalación y gestión de dependencias en nuestros proyectos.

Instalación en Windows

• 1. Descarga el instalador:

Visita la página oficial de Node.js y descarga la versión LTS (Long Term Support), que es la más estable para desarrollo.

• 2. Ejecuta el instalador:

Abre el archivo descargado y sigue las instrucciones del asistente. El instalador configurará tanto Node.js como npm automáticamente.

• 3. Verifica la instalación:

node --version
npm --version

Estos comandos deberían mostrar las versiones instaladas de Node.js y npm respectivamente.

Instalación en macOS

• 1. Usando Homebrew (recomendado):

Si tienes Homebrew instalado, puedes ejecutar:

brew install node

• 2. Usando el instalador:

Alternativamente, puedes descargar el instalador desde la web oficial y seguir el asistente de instalación.

• 3. Verifica la instalación:

node --version
npm --version

Instalación en Linux

• 1. Usando el gestor de paquetes:

Para distribuciones basadas en Debian/Ubuntu:

sudo apt update
sudo apt install nodejs npm

Para distribuciones basadas en Red Hat/Fedora:

sudo dnf install nodejs

• 2. Usando NVM (Node Version Manager):

NVM te permite gestionar múltiples versiones de Node.js, lo cual es útil para probar tu código en diferentes entornos:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc  # o source ~/.zshrc si usas zsh

# Instalar la última versión LTS
nvm install --lts

• 3. Verifica la instalación:

node --version
npm --version

Actualización de npm

Es recomendable mantener npm actualizado a su última versión para evitar problemas de compatibilidad:

npm install -g npm@latest

Configuración del registro de npm

Por defecto, npm utiliza el registro público de npmjs.com. Si trabajas en un entorno corporativo, es posible que necesites configurar un registro privado:

# Configurar un registro privado
npm config set registry https://registry.your-company.com/

# Volver al registro público
npm config set registry https://registry.npmjs.org/

Solución de problemas comunes

• Errores de permisos en Linux/macOS:

Si encuentras errores de permisos al instalar paquetes globales, puedes:

# Opción 1: Usar sudo (no recomendado para uso regular)
sudo npm install -g <paquete>

# Opción 2: Cambiar el directorio de instalación global (recomendado)
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Luego añade esto a tu archivo ~/.bashrc o ~/.zshrc:

export PATH=~/.npm-global/bin:$PATH

• Problemas de conexión:

Si tienes problemas para descargar paquetes, verifica tu conexión y configuración de proxy:

# Configurar proxy si estás detrás de uno
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

Una vez que tengas Node.js y npm correctamente instalados, estarás listo para instalar TypeScript y comenzar a desarrollar tus primeros proyectos. En la siguiente sección, veremos cómo configurar TypeScript en Visual Studio Code para aprovechar al máximo sus características.

Configurando TypeScript en VS Code

Visual Studio Code (VS Code) es un editor de código altamente recomendado para el desarrollo con TypeScript debido a su excelente integración nativa. Configurar correctamente tu entorno de VS Code te permitirá aprovechar al máximo las ventajas del tipado estático y las herramientas de desarrollo que ofrece TypeScript.

Instalación del compilador de TypeScript

Antes de configurar VS Code, necesitamos instalar el compilador de TypeScript globalmente usando npm:

npm install -g typescript

Para verificar que la instalación se realizó correctamente, ejecuta:

tsc --version

Esto mostrará la versión del compilador de TypeScript instalada en tu sistema.

Configuración básica de VS Code para TypeScript

VS Code viene con soporte integrado para TypeScript, pero podemos mejorar nuestra experiencia de desarrollo con algunas configuraciones adicionales:

1. Instalar extensiones recomendadas:

Abre VS Code y ve a la sección de extensiones (o presiona Ctrl+Shift+X). Busca e instala las siguientes extensiones:

• ESLint: Para análisis de código estático
• Prettier: Para formateo de código consistente
• TypeScript Hero: Para organizar importaciones automáticamente

2. Configurar el autoguardado:

Ejemplo de instalación de una extensión en VS Code: 

Para una experiencia de desarrollo más fluida, configura el autoguardado:

1. Ve a File > Preferences > Settings (o Code > Preferences > Settings en macOS)
2. Busca "Auto Save"
3. Selecciona "afterDelay" y establece un valor como 1000 (1 segundo)

Creación del archivo tsconfig.json

El archivo tsconfig.json es fundamental para cualquier proyecto TypeScript, ya que define cómo se debe compilar el código. Puedes crear uno básico ejecutando:

tsc --init

Este comando generará un archivo tsconfig.json con configuraciones predeterminadas y comentarios explicativos. Veamos algunas configuraciones importantes que puedes personalizar:

{
  "compilerOptions": {
    "target": "ES2020",          // Versión de JavaScript de salida
    "module": "commonjs",        // Sistema de módulos
    "strict": true,              // Habilita todas las comprobaciones estrictas de tipo
    "esModuleInterop": true,     // Permite importaciones más limpias
    "skipLibCheck": true,        // Omite la verificación de archivos .d.ts
    "forceConsistentCasingInFileNames": true,  // Asegura consistencia en nombres de archivos
    "outDir": "./dist",          // Directorio de salida para archivos compilados
    "rootDir": "./src"           // Directorio raíz de archivos fuente
  },
  "include": ["src/**/*"],       // Archivos a incluir en la compilación
  "exclude": ["node_modules"]    // Archivos a excluir
}

Configuración de tareas de compilación

VS Code puede automatizar la compilación de TypeScript mediante tareas:

• 1. Crear una tarea de compilación:

Presiona Ctrl+Shift+P (dependiendo del teclado será el Ctrl de la derecha o de la izquierda o Cmd+Shift+P en macOS) y escribe "Configure Default Build Task". Selecciona "tsc: build - tsconfig.json".

Esto creará un archivo .vscode/tasks.json con una configuración similar a:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "label": "tsc: build - tsconfig.json"
    }
  ]
}

• 2. Ejecutar la tarea de compilación:

Ahora puedes compilar tu proyecto presionando Ctrl+Shift+B (o Cmd+Shift+B en macOS).

Configuración del modo de observación (watch mode)

El modo de observación recompila automáticamente tus archivos cuando detecta cambios, lo que agiliza el desarrollo:

• 1. Añadir una tarea de observación:

Edita el archivo .vscode/tasks.json para añadir una tarea de observación:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "label": "tsc: build - tsconfig.json"
    },
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch",
      "problemMatcher": ["$tsc-watch"],
      "group": "build",
      "label": "tsc: watch - tsconfig.json"
    }
  ]
}

• 2. Iniciar el modo de observación:

Presiona Ctrl+Shift+P (o Cmd+Shift+P en macOS), escribe "Run Task" y selecciona "tsc: watch - tsconfig.json".

Personalización de IntelliSense

VS Code ofrece potentes capacidades de IntelliSense para TypeScript que puedes personalizar:

• 1. Ajustar la configuración de IntelliSense:

Ve a File > Preferences > Settings (o Code > Preferences > Settings en macOS) y busca "TypeScript". Algunas configuraciones útiles incluyen:

• typescript.suggest.completeFunctionCalls: Completa automáticamente las llamadas a funciones
• typescript.updateImportsOnFileMove.enabled: Actualiza las importaciones cuando mueves archivos
• typescript.preferences.importModuleSpecifier: Define cómo se generan las rutas de importación

{
  "typescript.suggest.completeFunctionCalls": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.importModuleSpecifier": "relative"
}

Depuración de código TypeScript

Configurar la depuración te permitirá ejecutar y analizar tu código paso a paso:

• 1. Crear configuración de depuración:

Presiona Ctrl+Shift+P (o Cmd+Shift+P en macOS) y escribe "Debug: Open launch.json". Selecciona "Node.js" como entorno.

Edita el archivo .vscode/launch.json para que se vea así:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true
    }
  ]
}

• 2. Iniciar la depuración:

Coloca puntos de interrupción en tu código haciendo clic en el margen izquierdo junto a los números de línea. Luego presiona F5 para iniciar la depuración.

Snippets personalizados para TypeScript

Los snippets (fragmentos de código) pueden aumentar tu productividad al escribir código repetitivo:

• 1. Crear snippets personalizados:

Ve a File > Preferences > User Snippets (o Code > Preferences > User Snippets en macOS) y selecciona "typescript.json".

Añade snippets útiles como este:

{
  "TypeScript Interface": {
    "prefix": "tsi",
    "body": [
      "interface ${1:InterfaceName} {",
      "  ${2:property}: ${3:type};",
      "}"
    ],
    "description": "Create a TypeScript interface"
  },
  "TypeScript Class": {
    "prefix": "tsc",
    "body": [
      "class ${1:ClassName} {",
      "  constructor(${2:parameters}) {",
      "    ${3}",
      "  }",
      "}"
    ],
    "description": "Create a TypeScript class"
  }
}

Con estas configuraciones, tu entorno de VS Code estará optimizado para el desarrollo con TypeScript, proporcionándote herramientas potentes para escribir, compilar y depurar tu código de manera eficiente.

Creando y ejecutando tu primer archivo TypeScript por terminal y con Code Runner

Una vez que tenemos TypeScript instalado y VS Code configurado, es momento de crear y ejecutar nuestro primer programa. En esta sección aprenderás a crear archivos TypeScript, compilarlos y ejecutarlos tanto desde la terminal como utilizando la extensión Code Runner en VS Code.

Creando tu primer archivo TypeScript

Vamos a crear un archivo TypeScript básico para entender el flujo de trabajo:

• 1. Crea una estructura de carpetas para tu proyecto:

Presiona Ctrl+Ñ para abrir la terminal en VSCode (Cmd+J en macOS)

// Usando el comando mkdir en la terminal de VSCode creamos un directorio con el nombre "my-ts-project"
mkdir my-ts-project
// Con el comando cd nos situamos dentro del nuevo directorio creado
cd my-ts-project

• 2. Inicializa un proyecto npm (opcional pero recomendado):

npm init -y

• 3. Crea una carpeta src para tus archivos fuente:

// esto creara una nueva carpeta "src" dentro de la carpeta creada anteriormente
mkdir src

• 4. Crea tu primer archivo TypeScript:

Crea un archivo llamado hello.ts dentro de la carpeta src , ábrelo e incluye el siguiente contenido:

// Define a typed function
function greet(name: string): string {
    return `Hello, ${name}! Welcome to TypeScript.`;
}

// Define a typed variable
const user: string = "Developer";

// Use the function and log the result
console.log(greet(user));

// Example with an interface
interface Person {
    firstName: string;
    lastName: string;
    age: number;
}

// Create an object based on the interface
const developer: Person = {
    firstName: "Jane",
    lastName: "Doe",
    age: 28
};

console.log(`Developer: ${developer.firstName} ${developer.lastName}, ${developer.age} years old`);

Este archivo simple demuestra algunas características básicas de TypeScript como el tipado de variables, funciones con tipos e interfaces.

Compilando y ejecutando desde la terminal

El proceso para ejecutar código TypeScript consta de dos pasos: primero compilar el código TypeScript a JavaScript y luego ejecutar el JavaScript resultante.

• 1. Compila el archivo TypeScript:

tsc src/hello.ts

Este comando generará un archivo hello.js en la misma carpeta. Si has configurado un tsconfig.json con outDir como vimos en la sección anterior, el archivo se generará en la carpeta especificada.

• 2. Ejecuta el archivo JavaScript generado:

node src/hello.js

Verás la salida de tu programa en la terminal:

Usando el modo de observación (watch mode)

Para evitar tener que compilar manualmente cada vez que realizas cambios, puedes usar el modo de observación:

tsc --watch src/hello.ts

O si tienes un archivo tsconfig.json:

tsc --watch

Esto iniciará el compilador en modo de observación, que recompilará automáticamente los archivos cuando detecte cambios.

Compilación y ejecución en un solo paso

Para simplificar el proceso, puedes usar paquetes como ts-node que permiten ejecutar TypeScript directamente sin un paso de compilación separado:

• 1. Instala ts-node:

npm install -g ts-node

• 2. Ejecuta tu archivo TypeScript directamente:

ts-node src/hello.ts

Configurando scripts en package.json

Una práctica común es definir scripts en tu package.json para facilitar las tareas comunes:

{
  "name": "my-ts-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node dist/hello.js",
    "dev": "ts-node src/hello.ts",
    "watch": "tsc --watch"
  },
  "devDependencies": {
    "typescript": "^4.9.5",
    "ts-node": "^10.9.1"
  }
}

Ahora puedes usar estos comandos:

npm run build  # Compila el proyecto
npm run start  # Ejecuta el JavaScript compilado
npm run dev    # Ejecuta directamente el TypeScript
npm run watch  # Inicia el modo de observación

Usando Code Runner en VS Code

La extensión Code Runner te permite ejecutar código directamente desde VS Code con un solo clic, lo que agiliza enormemente el desarrollo.

• 1. Instala la extensión Code Runner:

Abre VS Code, ve a la pestaña de extensiones (o presiona Ctrl+Shift+X), busca "Code Runner" y haz clic en Instalar.

• 2. Configura Code Runner para TypeScript:

Abre la configuración de VS Code (Ctrl+, o Cmd+, en macOS) y busca "Code Runner". Haz clic en "Edit in settings.json" y añade o modifica la siguiente configuración:

{
  "code-runner.executorMap": {
    "typescript": "ts-node"
  },
  "code-runner.clearPreviousOutput": true,
  "code-runner.runInTerminal": true
}

• 3. Ejecuta tu código TypeScript:

Abre tu archivo hello.ts y utiliza uno de estos métodos:

• Haz clic derecho en el editor y selecciona "Run Code"
• Usa el atajo de teclado Ctrl+Alt+N (o Cmd+Alt+N en macOS)
• Haz clic en el icono ▶️ (Play) en la esquina superior derecha del editor

El resultado se mostrará en el panel de la terminal integrada de VS Code:

[Running] ts-node "c:\path\to\your\project\src\hello.ts"
Hello, Developer! Welcome to TypeScript.
Developer: Jane Doe, 28 years old

[Done] exited with code=0 in 0.98 seconds

Depurando tu código TypeScript

Para una experiencia de desarrollo más completa, puedes depurar tu código TypeScript directamente en VS Code:

1. Añade puntos de interrupción haciendo clic en el margen izquierdo junto a los números de línea.

2. Inicia la depuración presionando F5 o haciendo clic en el icono de depuración en la barra lateral y luego en el botón de reproducción.

3. Observa las variables en el panel de depuración mientras avanzas por el código con los controles de depuración.

Creando un proyecto más complejo

A medida que tu proyecto crece, es útil organizar tu código en módulos. Veamos un ejemplo simple:

• 1. Crea un módulo en src/utils.ts:

// Export a function that can be imported elsewhere
export function capitalize(text: string): string {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

// Export an interface
export interface UserProfile {
    id: number;
    username: string;
    email: string;
    isActive: boolean;
}

• 2. Importa y usa el módulo en src/app.ts:

// Import specific exports from a module
import { capitalize, UserProfile } from './utils';

// Use the imported function
const name: string = "typescript";
console.log(`Learning ${capitalize(name)}`);

// Create an object based on the imported interface
const user: UserProfile = {
    id: 1,
    username: "typescript_dev",
    email: "dev@example.com",
    isActive: true
};

console.log(`User ${user.username} (${user.email}) is ${user.isActive ? 'active' : 'inactive'}`);

• 3. Ejecuta el nuevo archivo:

ts-node src/app.ts

O usando Code Runner como aprendimos anteriormente.

Con estos conocimientos básicos, ya estás listo para comenzar a desarrollar aplicaciones con TypeScript. A medida que avances en el curso, aprenderás características más avanzadas del lenguaje y patrones de diseño que te permitirán aprovechar al máximo el sistema de tipos de TypeScript.