TypeScript
Tutorial TypeScript: Instalación y configuración de TypeScript
Aprende a instalar Node.js, npm y configurar TypeScript en VS Code para desarrollar con éxito tus proyectos en TypeScript.
Aprende TypeScript y certifícateInstalació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:
- Ve a
File > Preferences > Settings
(oCode > Preferences > Settings
en macOS) - Busca "Auto Save"
- 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 funcionestypescript.updateImportsOnFileMove.enabled
: Actualiza las importaciones cuando mueves archivostypescript.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
(oCmd+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.
Ejercicios de esta lección Instalación y configuración de TypeScript
Evalúa tus conocimientos de esta lección Instalación y configuración de TypeScript con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Funciones
Reto composición de funciones
Reto tipos especiales
Reto tipos genéricos
Módulos
Polimorfismo
Funciones TypeScript
Interfaces
Funciones puras
Reto namespaces
Funciones flecha
Polimorfismo
Operadores
Conversor de unidades
Funciones flecha
Control de flujo
Herencia
Clases
Proyecto validación de tipado
Clases y objetos
Encapsulación
Herencia
Proyecto sistema de votación
Reto genéricos con clases
Inmutabilidad
Interfaces
Funciones de alto orden
Reto map y filter
Control de flujo
Interfaces
Reto funciones orden superior
Herencia y clases abstractas
Reto tipos mapped
Herencia de clases
Reto funciones puras
Variables y constantes
Introducción a TypeScript
Reto testing unitario
Funciones de primera clase
Clases
OOP y CRUD en TypeScript
Interfaces y su implementación
Tipos genéricos
Namespaces
Proyecto calculadora gastos
Operadores y expresiones
Proyecto generador de contraseñas
Reto unión e intersección
Encapsulación
Tipos de unión e intersección
Tipos de unión e intersección
Reto hola mundo en TS
Variables y constantes
Funciones puras
Control de flujo
Introducción a TypeScript
Resolución de módulos
Control de flujo
Reto tipos de utilidad
Reto tipos literales y condicionales
Reto exportar e importar
Propiedades y métodos
Tipos de utilidad
Clases y objetos
Tipos de datos, variables y constantes
Proyecto Minigestor de tareas
Operadores
Funciones flecha y contexto
Funciones
Reto type aliases
Funciones de alto orden
Funciones y parámetros tipados
Tipos literales
Reto enums
Tipos de utilidad
Modificadores de acceso y encapsulación
Polimorfismo
Tipos genéricos
Reto módulos
Tipos literales
Inmutabilidad
Proyecto Generator de datos
Variables y constantes
Funciones de primera clase
Todas las lecciones de TypeScript
Accede a todas las lecciones de TypeScript y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Typescript
Introducción Y Entorno
Instalación Y Configuración De Typescript
Introducción Y Entorno
Tipos De Datos, Variables Y Constantes
Sintaxis
Operadores Y Expresiones
Sintaxis
Control De Flujo
Sintaxis
Funciones Y Parámetros Tipados
Sintaxis
Funciones Flecha Y Contexto
Sintaxis
Enums
Sintaxis
Type Aliases Y Aserciones De Tipo
Sintaxis
Clases Y Objetos
Programación Orientada A Objetos
Interfaces Y Su Implementación
Programación Orientada A Objetos
Modificadores De Acceso Y Encapsulación
Programación Orientada A Objetos
Herencia Y Clases Abstractas
Programación Orientada A Objetos
Polimorfismo
Programación Orientada A Objetos
Decoradores Básicos
Programación Orientada A Objetos
Propiedades Y Métodos
Programación Orientada A Objetos
Inmutabilidad
Programación Funcional
Funciones Puras
Programación Funcional
Funciones De Primera Clase
Programación Funcional
Funciones De Alto Orden
Programación Funcional
Conceptos Básicos E Inmutabilidad
Programación Funcional
Funciones De Primera Clase Y Orden Superior
Programación Funcional
Composición De Funciones
Programación Funcional
Métodos Funcionales De Arrays (Map, Filter, Reduce)
Programación Funcional
Tipos Literales
Tipos Intermedios Y Avanzados
Tipos Genéricos
Tipos Intermedios Y Avanzados
Tipos De Unión E Intersección
Tipos Intermedios Y Avanzados
Tipos De Utilidad
Tipos Intermedios Y Avanzados
Unknown, Never Y Tipos Especiales
Tipos Intermedios Y Avanzados
Tipos Mapped
Tipos Intermedios Y Avanzados
Genéricos Con Clases E Interfaces
Tipos Intermedios Y Avanzados
Módulos
Namespaces Y Módulos
Namespaces
Namespaces Y Módulos
Resolución De Módulos
Namespaces Y Módulos
Exportación E Importación De Módulos
Namespaces Y Módulos
Introducción A Módulos
Namespaces Y Módulos
Testing Unitario En Typescript
Testing
En esta lección
Objetivos de aprendizaje de esta lección
- Instalar correctamente Node.js y npm como componentes fundamentales para el desarrollo con TypeScript
- Configurar Visual Studio Code para trabajar eficientemente con TypeScript, incluyendo extensiones y ajustes recomendados
- Crear y configurar un proyecto TypeScript básico con el archivo tsconfig.json para definir las opciones de compilación
- Compilar y ejecutar código TypeScript desde la terminal y mediante la extensión Code Runner en VS Code
- Implementar un flujo de trabajo efectivo utilizando tareas automatizadas, depuración y otros recursos para mejorar la productividad