La comunicación asíncrona en TypeScript te permite consumir APIs sin bloquear el hilo principal de tu aplicación. Si vienes de JavaScript, vas a notar que el método fetch se comporta casi idéntico que en Node.js, pero con la ventaja del tipado estático. Esta guía es para quienes quieren conectar TypeScript con HTML y traer datos JSON externos.

Qué es fetch en TypeScript y por qué usarlo

El método fetch es la forma estándar de pedir datos a una API o archivo remoto desde JavaScript y TypeScript. La diferencia clave en TypeScript es que puedes tipar cada elemento del DOM con el que interactúas, lo que reduce errores en tiempo de compilación.

¿Qué hace async/await en TypeScript? Permite que una operación corra en paralelo al hilo principal. Mientras esperas la respuesta de la API, tu app sigue funcionando y el usuario no percibe ningún bloqueo. [01:00]

Cómo configurar el proyecto fetch paso a paso

El ejercicio parte de una carpeta nueva llamada fetch dentro del repositorio del curso. Ahí dentro vive todo lo necesario: el HTML, el archivo TypeScript y la configuración del compilador.

Qué archivos HTML y JSON necesitas

Primero creas un index.html genérico que solo contiene un botón con la clase btn-info y un párrafo con la clase info. No vas a manipular el HTML, así que puedes copiarlo directo del repositorio. [01:30]

Para los datos, el ejemplo usa un JSON de prueba alojado en microsoftedge.github.io, específicamente el archivo de 64 kilobytes. Esa URL simula una API real y es la que vas a pasar como argumento a fetch. [02:10]

Por qué el archivo debe llamarse main.ts

El HTML del ejercicio invoca a main.js directamente. Como TypeScript compila a JavaScript con el mismo nombre, tu archivo fuente tiene que llamarse main.ts para que la cadena funcione. Es un detalle pequeño pero ineludible en este caso. [02:40]

Cómo escribir la función asíncrona con fetch y await

Dentro de main.ts declaras una constante fetchData que recibe la URL del JSON. La estructura es directa: usas fetch con await para esperar la respuesta y luego conviertes el resultado a JSON con un segundo await.

typescript const fetchData = async (url: string) => { const response = await fetch(url); const data = await response.json(); return data; };

El operador await es lo que hace que la operación corra en paralelo. La aplicación obtiene los datos sin congelarse y, cuando llegan, retoma la ejecución con la información lista para usar. [03:20]

Cómo conectar TypeScript con elementos del DOM

Aquí entra en juego querySelector junto con el tipado fuerte de TypeScript. Declaras el botón y el párrafo que vas a manipular, asignando su tipo exacto del DOM.

• let button: HTMLButtonElement para capturar el botón con la clase btn-info.
• let paragraph: HTMLParagraphElement para el párrafo con la clase info.
• Un addEventListener sobre el evento click que dispara la función fetchData.

Cuando el usuario hace clic, se ejecuta la petición y el contenido del párrafo se rellena con todo el JSON recibido. Puedes mostrarlo crudo o desestructurarlo por campos. [04:30]

Cómo configurar tsconfig.json para evitar errores de compilación

Aquí está el detalle que al primo de un amigo le costó un par de horas resolver. Si compilas con tsc main.ts directo, vas a ver un error que dice que no puede encontrar el valor global de Promise y que no puedes usar una propiedad asíncrona.

¿Por qué falla la compilación de fetch en TypeScript? Porque el compilador no incluye por defecto la librería DOM ni el soporte para promesas. Necesitas un tsconfig.json que declare esas librerías y un target moderno de JavaScript. [05:50]

Qué propiedades incluir en tsconfig

Dentro de tsconfig.json los elementos que no pueden faltar son:

• La librería DOM para que TypeScript reconozca tipos como HTMLButtonElement.
• El target de compilación apropiado para JavaScript moderno.
• La propiedad de interoperabilidad entre módulos.

Una vez configurado, la compilación correcta se ejecuta con tsc -p, donde -p indica que tome los parámetros desde tsconfig.json. Tras compilar, aparece el archivo main.js listo para que el HTML lo consuma. [06:40]

Cómo probar la app con Live Preview

Con la extensión Live Preview de Visual Studio Code abres index.html y se levanta un pequeño servidor local. Al presionar el botón, el párrafo se llena con toda la información del JSON. Funciona, pero mostrar el JSON crudo no es lo más amigable.

La práctica recomendada es extender el ejercicio: crea etiquetas, text inputs o filtros para presentar los datos de forma legible. Ahí vas a ganar verdadero músculo con la interacción entre TypeScript y HTML.

¿Qué API te gustaría consumir como siguiente reto? Comparte tu idea en los comentarios.