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».
- Abrimos el símbolo de sistema (como administrador):
- 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"
}
Con 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>http://holamundo.js</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.
-25.263740
-57.575926
Christian Amado 