Empieza el año 2020 y me he puesto el propósito de reciclarme un poco. Llevo demasiado tiempo sin tocar código y me estoy empezando a sentir mal.
Hoy voy a jugar un poco con TypeScript. La idea es montar el entorno y hacer algo básico. Os recomiendo visitar otros tutoriales de AdictosAlTrabajo:
ES6: el remozado JavaScript. Parte I: variables y constantes
Mi equipo es Mac
macOS Catalina
Versión 10.15.2
MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB
Vamos a la página de TypeScript y voy a descargar el entorno de Microsoft Visual Studio Code para Mac.
https://www.typescriptlang.org
Os recomiendo seguir los videos con las instrucciones del entorno. Es bastante fácil aunque para TypeScript vamos a tener que hacer algunas cosas adicionales para que funcione.
https://code.visualstudio.com/docs/introvideos/basics
Una vez descargado Visual Studio Code lo instalamos.
Las teclas que inicialmente más vamos a usar son Shift+Command+P para que salga la consola de parámetros.
Voy a configurarlo en castellano. Empezáis a escribir lenguaje y os propone opciones.
Instalamos la extensión para el lenguaje español y lo ejecutamos.
Hasta que no re-iniciemos no cargará los cambios.
Creamos un directorio de trabajo.
Creamos un fichero TypeScript en el directorio de trabajo.
Si pulsamos Control+F5 nos dirá que nos falta el entorno de node para ejecutar JavaScript en el lado servidor.
Vamos a la página de node y descargamos la versión de Mac.
https://nodejs.org/es/download/
Nos instalamos Node.js y npm (para instalar software adicional)
Con npm instalamos el compilador de TypeScript y verificamos la versión que tenemos: npm install -g typescript // para instalar.
Ahora con tsc podemos compilar (transpilar realmente) el fichero TypeScript en JavaScript.
Ahora vamos a trabajar dentro del entorno Visual Studio Code. He creado una carpeta llamada typescriptejemplos y un fichero holamundo.ts.
Podemos abrir una consola desde VSCode y ejecutar el comando tcs para compilar y node para ejecutar.
Vamos a hacer un pequeño cambio para organizar el código y la salida. Creamos un fichero llamado tsconfig.json donde pondremos los parámetros de compilación. Ahora vamos a decir que el directorio donde se generan los JavaScripts será “salida” y que las fuentes estarían en la carpeta “src”. Movemos las fuentes a esa carpeta src.
Para compilar dentro del entorno pulsamos Run Build Task (⇧⌘B) y nos desplegará las opciones, en este caso nuestro proyecto.
Para que no pregunte cada vez construimos que proyecto queremos invocar podemos crearemos un fichero (en el directorio .vscode) llamado tasks.json.
Si queremos que se ejecute nuestro programa con Control + F5 modificamos el fichero launch.json y establecemos el trayecto del fichero.
Ya está simplificado: con Shift + Command + B construimos el proyecto y con Control + F5 ejecutamos.
Si queremos hacer simplemente pruebas con el lenguaje podríamos hacerlo en el playground (campo de juegos online) en https://www.typescriptlang.org/play/index.html#
Si activamos la consola de desarrolladores del navegador veremos la salida.
Ahora es tiempo de descargarse la documentación del lenguaje y empezar a jugar un poco con la declaración de variables y funciones.
Empezamos por los más sencillo, declarar variables:
var a: [string, string, number] = ["10", "12", 3];
var b: string | number;
var c = { y:10 , z:20};
var d: typeof c;
d = { y:20 , z:30};
var e= {x:0,y:null};
b = 5;
b = "hola";
console.log(b);
console.log(a);
console.log(a[0]);
console.log(c);
console.log(d);
console.log(e.x);
Jugamos con funciones.
También con referencias a funciones (que luego se usará intensivamente).
Vemos como se crean clases.
La creación de métodos dentro de clases y la invocación a miembros.
El único problema con el playground es que a veces se queda un poco tostado cuando haces cosas raras. Para mi gusto es mejor volver al entorno MS Code, quitando que quieras probar algo de sintaxis sin instalar nada.
Es divertido ver como, los programadores que venimos de Java (izquierda) podemos olvidar que esto solo es azúcar sintáctico. 🙂
En este caso creo interfaces y clases y trato de verificar los tipos (que no es más que solo aire para JavaScript).
No sé si captáis la sutileza en el resultado.
Pero al final, cuando ejecutas esto no es más que el JavaScript en que se convierte el TypeScript.
Bueno, ya tengo escenario de juegos donde probar de primera mano.
El siguiente paso sería preparar el entorno para trabajar en GitHub, con TDD e integrando continuamente.
Integración de GitHub / Git / GibHub Desktop y MS Visual Studio Code
