Configuración de TypeScript con Visual Studio Code

Visual Studio Code (VSCode) es un editor de código potente y popular que ofrece un excelente soporte para el desarrollo de TypeScript. Esta guía le guiará por los pasos necesarios para configurar TypeScript en VSCode, lo que le permitirá contar con todo lo que necesita para comenzar a codificar de manera eficaz.

Instalación de Visual Studio Code

Si aún no ha instalado Visual Studio Code, siga estos pasos:

1. Vaya al sitio web oficial de VSCode.
2. Descargue el instalador para su sistema operativo.
3. Ejecute el instalador y siga las instrucciones en pantalla para completar la instalación.

Instalación de Node.js y npm

TypeScript se administra a través de npm (Node Package Manager), que requiere Node.js. Para instalar Node.js y npm:

1. Visita el sitio web oficial de Node.js.
2. Descargue e instale la versión LTS de Node.js, que incluye npm.
3. Verifique la instalación abriendo una terminal y ejecutando node -v y npm -v para verificar las versiones de Node.js y npm.

Instalación de TypeScript

Una vez que tengas instalado Node.js y npm, podrás instalar TypeScript de forma global. Abre una terminal y ejecuta el siguiente comando:

npm install -g typescript

Este comando instala TypeScript globalmente, lo que le permite usar el comando tsc para compilar archivos TypeScript desde cualquier lugar de su sistema.

Configuración de un proyecto TypeScript

Para iniciar un nuevo proyecto TypeScript, siga estos pasos:

1. Crea un nuevo directorio para tu proyecto y navega hasta él:

mkdir my-typescript-project
cd my-typescript-project

1. Inicializar un nuevo proyecto npm:

npm init -y

1. Instalar TypeScript como una dependencia de desarrollo:

npm install --save-dev typescript

1. Generar un archivo de configuración de TypeScript:

npx tsc --init

Este comando crea un archivo tsconfig.json en el directorio de su proyecto, que contiene configuraciones para el compilador TypeScript.

Configuración de VSCode para TypeScript

VSCode viene con soporte TypeScript incorporado, pero puedes mejorar aún más tu experiencia de desarrollo configurando el editor:

Abriendo su proyecto

Abra su proyecto TypeScript en VSCode:

1. Inicie VSCode.
2. Seleccione Archivo > Abrir carpeta... y elija el directorio de su proyecto.

Instalación de extensiones de TypeScript

Si bien VSCode ofrece un excelente soporte para TypeScript de manera inmediata, puedes instalar extensiones adicionales para mejorar la funcionalidad:

• Extensión TypeScript: Proporciona compatibilidad con el lenguaje TypeScript y funciones como IntelliSense, navegación de código y más.
• Prettier: Una extensión para formatear código, garantizando un estilo de código consistente.

Configuración del compilador TypeScript

Abra el archivo tsconfig.json para configurar los ajustes del compilador TypeScript. A continuación, se muestra un ejemplo de configuración:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Esta configuración establece la versión de ECMAScript de destino en ES6, especifica el formato del módulo CommonJS, habilita la verificación de tipos estricta y establece el directorio de salida en ./dist. También incluye mapas de origen para facilitar la depuración.

Cómo escribir y ejecutar código TypeScript

Cree un nuevo archivo TypeScript en el directorio src:

mkdir src
touch src/index.ts

Agregue algo de código TypeScript a index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

Para compilar su código TypeScript, ejecute:

npx tsc

Este comando compila sus archivos TypeScript y envía los archivos JavaScript al directorio dist.

Para ejecutar el código JavaScript compilado, utilice:

node dist/index.js

Conclusión

Configurar TypeScript con Visual Studio Code es un proceso sencillo que implica instalar las herramientas necesarias, configurar el proyecto y usar las potentes funciones de VSCode. Si sigue esta guía, tendrá un entorno de desarrollo de TypeScript completamente funcional y estará listo para crear aplicaciones sólidas con TypeScript.