Vamos a crear nuestra primera aplicación de TypeScript. Como de costumbre, nuestra primera aplicación será un “Hola mundo” (es decir, una aplicación que simplemente va a mostrar un mensaje por la pantalla)
Estamos de acuerdo en que no va a ser la mejor aplicación que hagas en tu vida. Pero es el punto de partida para ver el proceso completo desde el principio al final, y asegurarnos de que todo funciona.
Así que ¡vamos al lío! 👇
Al final de este artículo, tendremos una comprensión básica de cómo trabajar con un proyecto de TypeScript y bueno… más o menos el proceso es el mismo en proyectos más complejos
Configuración del proyecto
Vamos a empezar creando una nueva carpeta para tu proyecto (por aquello de tus ficheros estén ordenados, no estén desparramados por todo tu ordenador 😉).
Así que creamos una carpeta, bien sea con el explorador de ficheros, o con la terminal ejecutando el siguiente comando:
mkdir hola-mundo-typescript
cd hola-mundo-typescriptLo normal es que usemos TypeScript para inicializar esta carpeta. Lo veremos en el siguiente articulo Cómo crear un proyecto
Pero para este ejemplo es suficiente de momento con una carpeta vacía
Escribir el código
Ahora vamos a crear nuestra aplicación de TypeScript. Para ello, simplemente
- Creamos un archivo llamado
index.tsen la raíz de tu proyecto. - Abrimos el fichero
index.tsen tu editor de texto o IDE - Escribe el código copiado del siguiente ejemplo,
function saludar(nombre: string): string {
return `Hola, ${nombre}!`;
}
const nombre = "Luis";
console.log(saludar(nombre));Este código,
- Define una función
saludarque toma un nombre como parámetro y devuelve una cadena de saludo - Luego, define una constante
nombrecon valor “Luis” - Llama a
console.logpara imprimir el saludo en la consola
Compilar el código TypeScript
Ahora que tenemos nuestra sencilla aplicación en TypeScript, tenemos que compilar el código de TypeScript a JavaScript.
Los mayoría de programas como el navegador, o Node.js no “saben” ejecutar TypeScript. Tenemos que convertirlo en JavaScript, para lo cual usaremos el compilador de TS tsc.
Para ello si hemos instalado TypeScript como vimos en la entrada cómo instalar TypeScript, ejecutamos lo siguiente,
tsc index.tsDe hecho, podemos incluso ejecutar tsc sin necesidad de instalar nada en nuestro ordenador con el comando npx de NPM. Por ejemplo así,
npx tsc index.htmlEn cualquiera de los dos casos, el resultado de ejecutar tsc es que nos va a generará un archivo index.js en la misma carpeta.
Pero vamos, que lo normal la primera opción. Es decir, que si vamos a trabajar con TypeScript lo tengamos instalado.
Ejecutar la aplicación
El archivo index.js que hemos generado con tsc es el código JavaScript resultante de la compilación del archivo TypeScript, y es el que podemos ejecutar, o incorporar a nuestra página web.
En nuestro ejemplo, ahora tenemos nuestra aplicación “Hola Mundo”, guardada en archivo generadoindex.js. Podemos ejecutarla usando Node.js:
node index.jsDeberías ver la salida siguiente en la terminal:
Hola, Luis!¡Ya lo tenemos! En realidad, no ha sido tan difícil ¿verdad? Ya puedes ponerte a programar como un loco o una loca. O, sigue leyendo el resto del curso para dominar TypeScript 👍.