El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Compilando TypeScript

Siguiente ►
►

En esta sección, aprenderemos cómo compilar archivos TypeScript (.ts) en archivos JavaScript (.js). La compilación es un paso crucial en el flujo de trabajo de TypeScript, ya que los navegadores y entornos de ejecución como Node.js no entienden TypeScript directamente; necesitan JavaScript.

  1. Instalación de TypeScript

Antes de compilar, asegúrate de tener TypeScript instalado. Puedes instalarlo globalmente usando npm (Node Package Manager):

npm install -g typescript

Para verificar que la instalación fue exitosa, ejecuta:

tsc --version

  1. Compilación Básica

2.1. Compilación de un Solo Archivo

Para compilar un archivo TypeScript, usa el comando tsc seguido del nombre del archivo:

tsc archivo.ts

Esto generará un archivo archivo.js en el mismo directorio.

Ejemplo Práctico

Supongamos que tienes un archivo hello.ts con el siguiente contenido:

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

Para compilar este archivo, ejecuta:

tsc hello.ts

Esto generará un archivo hello.js con el siguiente contenido:

var message = "Hello, TypeScript!";
console.log(message);

2.2. Compilación de Múltiples Archivos

Puedes compilar múltiples archivos a la vez especificándolos en el comando:

tsc archivo1.ts archivo2.ts

  1. Configuración del Compilador con tsconfig.json

Para proyectos más grandes, es conveniente usar un archivo de configuración tsconfig.json. Este archivo permite definir opciones de compilación y especificar los archivos a compilar.

3.1. Creación de tsconfig.json

Puedes crear un archivo tsconfig.json en el directorio raíz de tu proyecto ejecutando:

tsc --init

Esto generará un archivo tsconfig.json con una configuración predeterminada.

3.2. Ejemplo de tsconfig.json

Aquí tienes un ejemplo básico de tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",        // Versión de JavaScript a la que se compilará
    "module": "commonjs",   // Sistema de módulos a utilizar
    "strict": true,         // Habilita todas las verificaciones estrictas
    "outDir": "./dist",     // Directorio de salida para los archivos compilados
    "rootDir": "./src"      // Directorio raíz de los archivos fuente
  },
  "include": [
    "src/**/*"              // Archivos a incluir en la compilación
  ],
  "exclude": [
    "node_modules"          // Archivos a excluir de la compilación
  ]
}

3.3. Compilación Usando tsconfig.json

Una vez que tienes un tsconfig.json, puedes compilar tu proyecto simplemente ejecutando:

tsc

El compilador TypeScript leerá las opciones del archivo tsconfig.json y compilará los archivos especificados.

  1. Opciones Comunes del Compilador

Aquí hay algunas opciones comunes que puedes usar en tsconfig.json:

Opción Descripción
target Especifica la versión de JavaScript a la que se compilará (e.g., es5, es6).
module Define el sistema de módulos a utilizar (e.g., commonjs, es6).
strict Habilita todas las verificaciones estrictas.
outDir Directorio de salida para los archivos compilados.
rootDir Directorio raíz de los archivos fuente.
sourceMap Genera archivos .map para depuración.
noImplicitAny Lanza un error cuando un tipo no puede ser inferido como any.

  1. Ejercicio Práctico

Ejercicio

  1. Crea un archivo greet.ts con el siguiente contenido:

    function greet(name: string): string {
    return `Hello, ${name}!`;
}

let user = "World";
console.log(greet(user));

  2. Compila el archivo usando el comando tsc.

  3. Ejecuta el archivo compilado greet.js usando Node.js:

    node greet.js

Solución

  1. Crea el archivo greet.ts con el contenido proporcionado.

  2. Compila el archivo:

    tsc greet.ts

  3. Ejecuta el archivo compilado:

    node greet.js

Deberías ver la salida:

Hello, World!

Conclusión

En esta sección, aprendiste cómo compilar archivos TypeScript a JavaScript usando el comando tsc y cómo configurar el compilador con un archivo tsconfig.json. La compilación es un paso esencial en el desarrollo con TypeScript, y dominar estas herramientas te permitirá trabajar de manera más eficiente en proyectos de cualquier tamaño.

En el próximo módulo, profundizaremos en los tipos y cómo trabajar con ellos en TypeScript. ¡Sigue adelante!

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados