[How To] Preparar entorno para TypeScript

abril 12, 2016 Christian Amado 0 Comentarios

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:\typescripts\holamundo.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.

Christian Amado