Cómo instalar TypeScript y Node.js y compilar ficheros TypeScript
En este post, aprenderemos a preparar el entorno de desarrollo viendo cómo instalar TypeScript y Node.js e iniciar en la programación con estas tecnologias, aprendiendo a compilar ficheros TypeScript.
¿Qué es Node.js?
Node.js es un entorno de tiempo de ejecución de JavaScript (de ahí su terminación en .js haciendo alusión al lenguaje JavaScript). Este entorno de tiempo de ejecución en tiempo real incluye todo lo que se necesita para ejecutar un programa escrito en JavaScript. También aporta muchos beneficios y soluciona muchísimos problemas.
Tanto JavaScript como Node.js se ejecutan en el motor de tiempo de ejecución JavaScript V8 (V8 es el nombre del motor de JavaScript que alimenta Google Chrome. Es lo que toma nuestro JavaScript y lo ejecuta mientras navega con Chrome). Este motor coge el código JavaScript y lo convierte en un código de máquina más rápido. El código de máquina es un código de nivel más bajo que la computadora puede ejecutar sin necesidad de interpretarlo primero, ignorando la compilación y por lo tanto aumentando su velocidad.
¿Para qué sirve Node.js?
Node.js utiliza un modelo de entrada y salida sin bloqueo controlado por eventos que lo hace ligero y eficiente (con entrada nos referimos a solicitudes y con salida a respuestas). Puede referirse a cualquier operación, desde leer o escribir archivos de cualquier tipo hasta hacer una solicitud HTTP.
La idea principal de Node.js es usar el modelo de entrada y salida sin bloqueo y controlado por eventos para seguir siendo liviano y eficiente frente a las aplicaciones en tiempo real de uso de datos que se ejecutan en los dispositivos. Es una plataforma que no dominará el mundo del desarrollo web pero si que satisface las necesidades de una gran mayoría de programadores.
La finalidad de Node.js no tiene su objetivo en operaciones intensivas del procesador, de hecho, usarlo para programación de más peso eliminará casi todas sus ventajas. Donde Node.js realmente brilla es en la creación de aplicaciones de red rápidas, ya que es capaz de manejar una gran cantidad de conexiones simultáneas con un alto nivel de rendimiento, lo que equivale a una alta escalabilidad.
¿Qué es TypeScript?
TypeScript es un superset de JavaScript desarrollado por Microsoft que nos permite tener nuevas funcinalidades dentro de JavaScript como por ejemplo el tipado fuerte o el tipado estático (todo lo que veremos es aplicable a JavaScript salvo el tipado fuerte).
Cómo instalar TypeScript y NodeJS
Podemos obtener typescript como un paquete de Node.js tal y como indica la página oficial: https://www.typescriptlang.org/download
Para obtener Node.js, podéis hacerlo usando este enlace: https://nodejs.org/es/download/
Una vez instalado Node.js, lanzamos el siguiente comando para instalar TypeScript:
Primeros pasos con TypeScript
Hola Mundo con TypeScript
Creamos un fichero index.html que enlace a un fichero TypeScript hola-mundo.ts:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Hola Mundo con TypeScript</title>
<script src="js/hola-mundo.js"></script>
</head>
<body>
<h1>Cómo instalar TypeScript y Node.js y primeros pasos con TypeScript</h1>
<p>adrimelus.com/blog</p>
</body>
</html>En el fichero hola-mundo.ts, escribimos una alerta y un log «Hola Mundo con TypeScript»:
console.log("Hola Mundo con TypeScript");
alert("Hola Mundo con TS");A continuació, vamos a compilar el fichero TypeScript. Para ello, nos dirijimos con la consola en el directorio donde se encuentra el fichero hola-mundo.ts y ejecutamos el siguiente comando:
Si la consola no reconoce el comando anterior, posiblemente sea porque no detecta TypeScript instalado (ejecutar npm install typescript en el directorio en tal caso).
El comando npx tsc hola-mundo.ts compilará el fichero TypeScript y generará un fichero javaScript equivalente.
Compilación / Transpilación automática
De la manera que hemos visto cómo compilar archivos TypeScript, cada vez que hacemos una modificación en el código deberemos compilar de nuevo. Para generar una compilación automática, deberemos ejecutar el siguiente comando: (La opción -w hace que esté revisando una y otra vez en búsqueda de todos los ficheros con la extensón .ts (*.ts).
De este modo estará esperando cualquier cambio en los cualquier fichero .ts para compilarlos de nuevo.
Si genera un error la ejecución y la has realizado desde la consola de Windows (cmd), deberás ejecutar el mismo comando en una terminal de comandos Linux en Windows como explico a continuación.
Cómo instalar una terminal de comandos Linux en Windows
Instalación de cygwin
A la hora de estar programando con TypeScript, es recomendable aprovecharse de las herramientas que trae linux frente a windows. Una opción si estás usando windows, es instalando un emulador como Cygwin.
Cygwin es un emulador de la consola de linux para windows, es decir nos va a permitir tener una terminal con casi todas las funcionalidades que trae la terminal de linux para windows.
Puedes obtener cygwin a través del siguiente enlace: https://cygwin.com/install.html
Una vez seleccionemos la ruta de instalación y continuemos con la instalación, tendremos la opción de añadir paquetes a Cygwin, para más adelante poder usar herramientas como git, ssh, y aplicaciones de consola típicas de Linux.
En mi caso he añadido los paquetes openssh, git y nano y wget.
Cómo instalar TypeScript en una terminal de comandos Linux
De igual manera que hemos visto antes, para instalar TypeScript en la consola deberemos ejecutar «npm install typescript» en el directorio deseado.
Cómo instalar TypeScript resaltado de colores
Para que Sublime Text nos reconozca el lenguaje TypeScript y coloree el código correctamente, lo primero que hay que hacer es descargar este paquete: https://github.com/Microsoft/TypeScript-Sublime-Plugin
Ahora abre Sublime Text y entra en el menú Preferences > Browser Packages, esto nos abrirá la carpeta donde están los paquetes de sublime, aqui creamos el directorio TypeScript y copiamos dentro los ficheros TypeScript.tmLanguage y TypeScriptReact.tmLanguage del paquete que hemos descargado antes. Reiniciamos Sublime y ya nos reconocerá el código TypeScript.
Más información:
También puedes visitar mi blog: https://adrimelus.com/blog/
O enviarme un mensaje: https://adrimelus.com#contact
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario