Para poder realizar este tutorial ud debe:

  1. Haber configurado el ambiente de trabajo en su máquina.

Temas a tratar

Abra VSCode y cree una nueva carpeta en donde se guardarán todos los archivos del proyecto de este tutorial.

Dentro de VS Code, abra una nueva terminal. Para esto, puede digitar el comando Ctrl + J. También puede hacerlo desde el menú Terminal > New Terminal

El primer archivo que se creará en el proyecto, será un archivo HTML pase para permitir la renderización del proyecto en un navegador.

Cree el archivo index.html

Una vez creado el archivo, diríjase a la sección de edición de código y digite el comando Ctrl + Espacio ; este comando es ampliamente utilizado para obtener recomendaciones de código. En este caso, por ejemplo, le proporcionará las siguientes recomendaciones:

Diríjase hacia el final de la lista, y seleccione "HTML sample"

Esto creará un documento HTML base.

Ajuste el documento base así:

Para incluir TypeScript en el proyecto se creará un archivo denominado main.ts en la carpeta raíz.

Este será el archivo en el que se escribirá el código del proyecto.

Luego, se creará la configuración del compilador de TypeScript (tsc). Para esto, en la consola de comandos que hemos abierto, digite el comando tsc --init

Esto creará el archivo tsconfig.json.

Dentro del archivo main.ts incluya el siguiente código, que mostrará en la consola del navegador el mensaje "Hello World!" 

console.log("Hello World!");

Esta será la única línea que contenga el archivo TypeScript. Sin embargo, recuerde que los navegadores no reconocen TypeScript directamente; es por esto que se utiliza un traductor para realizar la conversión de los archivos de TypeScript a JavaScript.

Para ejecutar el compilador, digite en la consola el comando tsc -w.

Observe que se ha creado un nuevo archivo main.js, que es el que se está importando en el documento HTML

La opción -w del comando tsc, permite dejar la compilación en "watch mode". Esto quiere decir que cualquier cambio que se realice en el archivo main.ts y se guarde, ejecutará nuevamente la compilación, sin necesidad de ejecutar el comando múltiples veces.

Una vez ya esté listo para correr el proyecto, inicializamos un servidor web local. Para esto haga clic derecho sobre el archivo HTML y seleccione "Abrir con Live Server".

Nota: si no le aparece la opción "Open with Live Server" es porque no ha instalado la extensión Live Server. Revise el tutorial de configuración del entorno de trabajo para realizar este proceso

Espere un momento y se abrirá una nueva ventana en su navegador con la dirección http://127.0.0.1:5500/index.html. Observe que esta página está vacía ya que no se ha incluído contenido observable dentro del documento HTML.

Finalmente, abra la consola en el navegador, para esto, en la pestaña que ha abierto, digite F12 o de click derecho > Inspeccionar. Luego, en el panel que se ha abierto, seleccione la pestaña "Consola".

Allí, observará el mensaje que se ha especificado para imprimir, que es "Hello World!".

Esto quiere decir que se ha realizado la compilación y la ejecución del código de TypeScript correctamente.

Si usted cambia el mensaje en el código de TypeScript, este cambio se verá reflejado en la consola automáticamente al guardar el archivo.