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
