Ejercicio: Configuración de un proyecto de TypeScript

  • 10 minutos

En este ejercicio, creará un proyecto de TypeScript. Después, ejecutará el compilador para confirmar que el entorno de desarrollo está configurado correctamente y comprobará que se ha generado el archivo JavaScript.

Configuración de un proyecto de TypeScript en Visual Studio Code

En este paso, creará un área de trabajo de proyecto en Visual Studio Code y, luego, inicializará el proyecto.

  1. Abra Visual Studio Code.

  2. En el panel de bienvenida, seleccione Agregar carpeta de área de trabajo.

    Screenshot of the Visual Studio Code Welcome pane, with the Add workspace folder command highlighted.

  3. Cree una carpeta de proyecto y seleccione Agregar.

  4. En el panel izquierdo, seleccione el botón Explorador.

    Screenshot of the Visual Studio Code Explorer pane, with the Explorer button highlighted.

  5. En el panel Explorador, seleccione el icono Nuevo archivo.

    Screenshot of the Visual Studio Code Explorer pane, with the New File icon highlighted.

  6. En Module 01 Exercise (Ejercicio del módulo 01), escriba el nombre de archivo module01.ts y presione ENTRAR. El archivo TypeScript aparece en un nuevo editor de código.

    Screenshot of the Visual Studio Code Explorer pane, with the new TypeScript file displayed in the code editor.

Generación de un archivo tsconfig.json

El compilador de TypeScript aplica el comportamiento predeterminado cuando se compila código fuente TypeScript. Aun así, es posible modificar las opciones del compilador de TypeScript si se agrega un archivo tsconfig.json a la raíz de la carpeta del proyecto TypeScript. Este archivo define la configuración del proyecto de TypeScript, como las opciones del compilador y los archivos que deben incluirse.

Puede usar la opción init del compilador de TypeScript para generar un archivo tsconfig.json con opciones predeterminadas.

  1. En Visual Studio Code, abra una nueva ventana del terminal. Para ello, seleccione Terminal>Nuevo terminal.

  2. En el símbolo del sistema, escriba tsc --init.

    Observe que el nuevo archivo tsconfig.json se ha agregado al panel del explorador. Es posible que tenga que actualizar el panel del explorador para ver el archivo.

  3. Abra el archivo tsconfig.json en el editor de código. Verá que ofrece numerosas opciones, muchas de las cuales están comentadas. Revise la descripción de cada opción habilitada.

  4. En el archivo tsconfig.json, busque la opción de destino y cámbiela a "ES2015".

  5. Actualice el archivo tsconfig.json para que el compilador guarde todos los archivos JavaScript en una nueva carpeta.

    a. En el panel del explorador, cree una carpeta en el proyecto denominada build.
    b. En el archivo tsconfig.json, busque la opción outDir, quite el comentario y establezca el parámetro en build.

  6. Guarde el archivo tsconfig.json.

  7. En el símbolo del sistema, escriba tsc. Este comando lee el archivo tsconfig.json y restablece las opciones del proyecto.

Sugerencia

Para obtener más información sobre el archivo tsconfig.json, vea la referencia de TSConfig.

Compilación de TypeScript en JavaScript

Vamos a agregar código JavaScript al archivo TypeScript y, luego, a compilarlo.

  1. Copie y pegue el siguiente código JavaScript en el editor de module01.ts.

    function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));

    Tenga en cuenta que, aunque todavía no ha compilado el código, Visual Studio Code ha usado su compatibilidad integrada con TypeScript para realizar una comprobación del tipo. Igual que antes, hay errores de tipo en los dos parámetros de la función addNumbers.

    Visual Studio Code editor with IntelliSense, showing that there's a type-checking error on the first parameter of the addNumbers function.

  2. Actualice el código TypeScript para especificar un tipo para cada parámetro. Reemplace x por x: number y reemplace y por y: number.

  3. Guarde el archivo TypeScript. El compilador de TypeScript solo funciona en la versión guardada del archivo.

  4. En el símbolo del sistema del terminal, escriba tsc module01.ts. El compilador debería ejecutarse sin errores.

    Observe que se ha agregado un nuevo archivo JavaScript, pero no se encuentra en la carpeta build del explorador. Es posible que tenga que actualizar el panel del explorador para ver el archivo. Al ejecutar el comando tsc en un solo archivo, el compilador omite el archivo tsconfig.json.

  5. Para cargar el archivo de configuración y compilar todos los archivos .ts de la carpeta, ejecute tsc sin ningún nombre de archivo. Este comando debería agregar el archivo .js a la carpeta build. Recuerde eliminar el archivo .js adicional de la carpeta raíz.

  6. Abra el archivo module01.js y, luego, seleccione el botón Dividir editor a la derecha de la esquina superior derecha para abrir una nueva vista del editor.

    Ahora debería poder ver los archivos .ts y .js en paralelo. Tenga en cuenta que son idénticos, con la única diferencia de que el archivo .js no incluye las nuevas anotaciones de tipo.

  7. En el símbolo del sistema de Terminal, escriba node ./build/module01.js. Este comando ejecuta JavaScript y muestra el resultado en el registro de la consola.

Adición de un archivo HTML

El último paso consiste en agregar un archivo HTML al proyecto para ejecutar y probar el código JavaScript.

  1. En el Explorador, seleccione el botón Nuevo archivo.

  2. Escriba el nombre de archivo module01.html y, luego, presione ENTRAR. El archivo HTML aparece en un nuevo editor de código.

  3. Copie y pegue el siguiente código HTML en el editor y guarde el archivo.

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <title>Test JavaScript</title>
</head>
<body>
   <h1>Test JavaScript</h1>
   <p id="date"></p>
   <p>This page calls the script module01.js and is used for testing.</p>
   <script src="./build/module01.js"></script>
</body>
</html>

  4. En el Explorador, haga clic con el botón derecho en module01.html y seleccione Abrir en el explorador predeterminado.

  5. Active las herramientas de desarrollo para el explorador. Ya está todo listo para empezar la codificación en TypeScript.

Solución del ejercicio

Puede descargar el área de trabajo completada de Visual Studio Code del repositorio de código de GitHub. Para ejecutar la solución, primero debe instalar el software siguiente en el equipo:

  • Visual Studio Code (o el IDE que prefiera)
  • Administrador de paquetes de nodos (npm)
  • Compilador de TypeScript (tsc)

Para obtener los mejores resultados, siga las instrucciones completas a fin de configurar el entorno y usar el compilador de TypeScript en este módulo. Después de configurar el entorno, puede ejecutar cualquiera de los archivos de configuración del laboratorio o de solución en la ruta de aprendizaje Compilación de aplicaciones de JavaScript mediante TypeScript.