[How To] Preparar entorno para TypeScript

[How To] Preparar entorno para TypeScript

Visual Studio

Introducción

TypeScript es un lenguaje de programación libre y de código abierto desarrollado por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados en clases. 

AngularJS 2.0 lo puede utilizar como lenguaje base y eso va genial. Su sintaxis es muy similar a C#, razón por la cual su curva de aprendizaje no es muy pronunciada. Toda la información necesaria se encuentra en el sitio oficial, mantenido por Microsoft.

Manos a la obra

  • Se debe instalar NodeJs desde aquí. Sugiero la opción “Recommended for Most Users”. Durante la instalación se debe seleccionar las dos opciones del árbol “Add to Path”.

Instalando NodeJs

  • Abrimos el símbolo de sistema (como administrador):

cmd

  • Por último, ejecutamos la siguiente instrucción:
npm install -g typescript

Listo, ya tenemos instalado TypeScript en nuestro sistema. Ahora, debemos probar si funciona nuestro “Hola mundo desde TypeScript”.

  • Creamos un archivo que se llame holamundo.ts, en una carpeta. En mi caso, D:typescriptsholamundo.ts
  • Dentro del archivo colocamos el código TypeScript correspondiente:
function saludar() {
return "Hola mundo desde TypeScript";
}

document.body.innerHTML = saludar();

  • Compilamos utilizando el símbolo de sistemas y veremos en la carpeta creada el archivo holamundo.js que es el resultado de la compilación del archivo holamundo.ts.
    
tsc holamundo.ts

Visual Studio Code

  • En el editor, vamos a File > Open Folder… > y buscamos la carpeta que necesitamos. En mi caso D:typescripts
  • Seleccionamos el archivo holamundo.ts que hemos creado y eliminamos el archivo holamundo.js (que ha creado el compilador en el paso anterior).
  • En el editor creamos un nuevo archivo que se llame tsconfig.json (que es la configuración de nuestro typescript a nivel de archivo):
{
"compilerOptions": {
"target": "es5",
"module": "amd",
"sourceMap": true
}
}

Más información sobre cada línea aquí.

  • Haremos que la compilación sea automática mediante tareas desde el Visual Studio Code, para lo cual crearemos una carpeta con nombre .settings y dentro de ella, un archivo task.json con el siguiente contenido:
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"showOutput": "silent",
"args": ["holamundo.ts"],
"problemMatcher": "$tsc"
}

Visual Studio CodeCon esta configuración logramos compilar todos los archivos indicados en args. De esta manera obviamos la utilización del símbolo de sistema por cada archivo TypeScript.

  • Completamos el ejercicio con el archivo index.html que visualizará el texto expuesto en el código typescript:
<!DOCTYPE html>
<head>
<title>TypeScript - Ejercicio 1</title>
</head>
<body>
<h1><script src="holamundo.js"></script></h1>
</body>

En la carpeta de ubicación hacemos doble clic en el archivo index.html y debemos ver nuestro mensaje completando las pruebas 😉

Conclusión

De esta manera logramos que TypeScript funcione de manera automática en nuestro pequeño proyecto, dentro del Visual Studio Code para mayor comodidad.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.