Buenas comenzando con la programación de TypeScript, hoy vamos ver como hacer un pequeño programa en TypeScript y explicaremos las ventajas vs Javascript.
TypeScript - ¿Como realizar un hola mundo en TypeScript?
Para iniciarnos en TypeScript primero tenemos que tener instalado el Node.js (si no viste el post pasa por acá!) y tener instalado el TypeScript (si tampoco viste este post también pasa por acá!).
Comencemos ahora creamos un simple html con el siguiente código, puedes usar el notepad, notepad++, etc.
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>El lado oscuro de Java te da la bienvenida a TypeScript!</p>
</body>
</html>
Esta pequeña porción de código la guardamos dentro de un archivo llamado index.html en el escritorio.
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>El lado oscuro de Java te da la bienvenida a TypeScript!</p>
</body>
</html>
Al ejecutarlo en Chrome, verán algo como lo siguiente:
Vemos un poco de la consola de Chrome!
Y hora que estamos en el chrome vamos a activar Herramientas para desarrolladores.
Para para eso vamos al chrome, vamos hacia los "..." (los 3 puntitos) seleccionamos "Mas Herramientas" y luego seleccionamos "Herramientas para desarrolladores", una vez que estén mas cancheros utilicen el atajo de teclado Ctrl +Mayus +I
Seleccionamos consola y no vemos nada. Esto significa que esta bien.
Bueno continuemos con TypeScript, creamos un nuevo archivo y escribimos:
console.log("Hola Mundo TypeScript!");
Y lo guardamos como app.ts.
Nota!
Todos los archivos TypeScript se deben guardar con la extensión ".ts".
TypeScript - ¿Como compilar código en TypeScript?
Habiendo realizados los pasos de arriba ahora nos toca compilar el código el TypeScript.
Ahora vamos a las lineas de comando (el cmd), Inicio -> Ejecutar escribimos cmd.
Nos paramos donde esta nuestros archivos .ts y lo compilamos a TypeScript, para esto ejecutamos el siguiente comando
tsc app.ts
o
tsc app (sin la extensión)
Nota!
Es valido ejecutar el archivo con la extensión ".ts" o sin la misma ya que la toma por default.
Si todo salio bien se creara el archivo Javascript resultante del ".ts".
Volvemos a nuestro index.html y agregamos el llamado al archivo javascript resultante.
Para esto entramos en el body y agregamos:
<script src="app.js"></script>
El código tiene que quedar así:
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>El lado oscuro de Java te da la bienvenida a TypeScript!</p>
<script src="app.js"></script>
</body>
</html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>El lado oscuro de Java te da la bienvenida a TypeScript!</p>
<script src="app.js"></script>
</body>
</html>
Si todo salio bien al volver abrir el chrome y su consola veremos lo siguiente:
Nota!
Acá existe un gran gris para los que ya saben JavaScript, que saben que el console.log es JavaScript es decir por mas que NO compilemos el archivo y lo importemos con cualquier extensión va a funcionar pero no es la idea del ejemplo.
Díganme si les fue útil y como les resulto la guía.
Saludos
TypeScript - ¿Como realizar un hola mundo en TypeScript? - ¿Como compilar código en TypeScript?
Reviewed by El lado oscuro de java
on
junio 04, 2018
Rating:
Reviewed by El lado oscuro de java
on
junio 04, 2018
Rating:
No hay comentarios: