Llevar TypeScript al navegador requiere un paso intermedio: compilar a JavaScript. Aprenderás a conectar tu código TypeScript con un archivo HTML, ejecutarlo en el navegador y verificar la salida en la consola del explorador. Útil si vienes de practicar TypeScript en terminal y quieres dar el salto a la web.

Por qué necesito compilar TypeScript antes de usarlo en HTML

El navegador no entiende TypeScript de forma nativa. Solo lee JavaScript, así que cualquier archivo .ts necesita pasar por el compilador antes de invocarse desde un HTML.

La lógica es simple: TypeScript existe para mejorar el tipado dentro de JavaScript, pero JavaScript es el lenguaje que vive en proyectos web. Por eso tu flujo siempre va a ser: escribir en TypeScript, compilar, y dejar que el HTML cargue el JavaScript resultante [01:30].

¿Por qué el navegador no lee TypeScript? Porque TypeScript es un superset que añade tipado estático, y los exploradores solo ejecutan JavaScript. Necesitas compilar con tsc para generar el archivo .js que el HTML sí puede invocar.

Cómo creo la estructura del proyecto web con TypeScript

Dentro del curso vas a crear una carpeta llamada web y, dentro, dos archivos clave que trabajan en conjunto.

• index.html: un HTML genérico que invoca un script con la línea <script src="main.js"></script>. Puedes copiarlo desde el repositorio de GitHub del curso para no escribirlo desde cero.
• main.ts: tu archivo TypeScript con la lógica. En el ejemplo aparece un console.log("Hola desde mi explorador"), una variante del clásico hola mundo [02:15].

Fíjate en un detalle: el HTML llama a main.js, no a main.ts. Esa es la pista de que necesitas compilar antes de abrir el sitio.

Cómo compilo main.ts a main.js

Desde la terminal, te mueves a la carpeta web y ejecutas:

bash tsc main.ts

Si corres ls después, verás que apareció main.js junto al original. En VS Code lo notarás también en el árbol de archivos. Ese archivo generado es el que tu HTML va a leer sin problemas [03:20].

Cómo previsualizo mi HTML directamente desde VS Code

Para ver el resultado en el navegador sin abrir manualmente el archivo, te conviene instalar una extensión que levante un servidor local.

Tienes dos opciones recomendadas:

• Live Server de Ritwick Dey: con más de 60 millones de descargas. Te aparece un botón Go Live en la barra inferior de VS Code.
• Live Preview de Microsoft: agrega un icono de Show Preview dentro del editor cuando abres un archivo HTML.

Cualquiera de las dos te sirve. Al activarlas, generan una URL tipo localhost que indexa tu HTML como si fuera un sitio web real [04:30].

¿Qué hace Live Server? Levanta un servidor local que sirve tus archivos HTML en una URL tipo http://localhost, con recarga automática cuando guardas cambios. Es la forma más rápida de previsualizar un proyecto web estático.

Cómo verifico que TypeScript está funcionando en el navegador

Una vez que tienes la previsualización abierta, el siguiente paso es revisar la consola del explorador. Ahí es donde vas a confirmar que el console.log escrito en TypeScript llegó hasta el navegador.

Dentro de Live Preview puedes abrir el panel de herramientas de desarrollo desde el menú de la extensión y entrar a la pestaña Console. Ahí debería aparecer el mensaje Hola desde mi explorador [05:10].

Si prefieres trabajar fuera de VS Code, copias la URL de localhost, la pegas en tu navegador favorito (en el ejemplo se usa Edge) y presionas F12 para abrir las herramientas de desarrollador. El resultado en consola es idéntico.

Qué demuestra esta integración

Lo importante de este flujo es entender la cadena completa de herencia:

1. Escribes lógica en main.ts con TypeScript.
2. Compilas con tsc y se genera main.js.
3. El index.html invoca ese main.js mediante la etiqueta <script>.
4. El navegador ejecuta el JavaScript y muestra el resultado en consola.

Es el mismo console.log que antes corrías con Node en la terminal, solo que ahora vive en un sitio web real. Así es como TypeScript hereda funcionalidad a JavaScript y JavaScript la representa gracias al HTML [06:00].

¿Ya probaste levantar tu primer proyecto web con TypeScript? Cuéntame en los comentarios qué extensión elegiste y si encontraste algún detalle distinto al compilar.