Mini Tutorial de TypeScript. 02 Requerimientos

Introducción a TypeScript

Vamos a crear nuestro primer script TS (TypeScript).

Creamos un archivo de nombre app.js y otro llamado index.html

El archivo ‘index.html’ debe tener la siguiente estructura

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Introducción a TypeScript</title>

<script src=”app.js”></script>

</head>

<body>

</body>

</html>

El archivo de app.js, debe tener lo siguiente:

function saludar(nombre: string){

     console.log(“Bienvenido(a) ”+ nombre +  “ al Mini Tutorial de TypeScript”);

}

var alumno = {

     nombre : ”David”

};

saludar(alumno);

 

Si se ejecuta el código anterior, no veremos el resultado correcto en la consola; para arreglarlo, haremos lo siguiente:

1.       Renombramos app.js por app.ts

2.       Desde la consola nos ubicamos en la raíz donde se encuentran nuestros archivos y ejecutamos el siguiente comando: tsc app.ts

3.       Después de compilar el archivo, nos va a marcar un error, por la siguiente línea ‘saludar(alumno)’, ahora la vamos a cambiar por ‘saludar(alumno.nombre)’ y ejecutamos el script

El resultado en consola debe ser “Bienvenido(a) David al Mini Tutorial de TypeScript”

Nota: Todo el código que usamos en JavaScript es totalmente compatible con TypeScript, lo único que cambia es la extensión de .js por .ts y después se compila el archivo ts con el comando: tsc app.ts

Configuración de TypeScript

Lo que vamos a hacer a continuación es crear un proyecto de TypeScript, esto con el objetivo de que cada que hagamos un nuevo archivo .ts se pueda compilar de forma automática y sea más sencillo su uso y depuración.

Nos ubicamos desde la consola en la carpeta donde deseamos crear el proyecto (donde ya tenemos nuestro index.html y app.ts) y escribimos tsc  -init

Esto creará un archivo tsconfig.json, el cual tiene la siguiente estructura:

{

    "compilerOptions": {

        "module": "commonjs",

        "target": "es5",

        "noImplicitAny": false,

        "sourceMap": false

    }

}

Esta estructura hay que dejarla así como esta. Ahora solo ejecutamos el comando tsc y listo, podemos ver el resultado en la consola del navegador.

A partir de haber ejecutado el comando tsc, cada que agreguemos un archivo .ts se va a generar su paralelo en .js

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

once + 19 =