Cómo trabajar con TypeScript y promesas
TypeScript mejora el desarrollo de JavaScript al agregar tipos estáticos. Cuando se trabaja con código asincrónico, se utilizan promesas para gestionar operaciones que se completarán en el futuro. TypeScript proporciona herramientas para gestionar promesas con seguridad y claridad de tipos. Esta guía explora cómo trabajar con promesas en TypeScript, desde el uso básico hasta escenarios avanzados.
Entendiendo las promesas
Una promesa es un objeto que representa la finalización o el fracaso eventual de una operación asincrónica. Proporciona métodos para manejar el resultado o el error de la operación. En TypeScript, las promesas se pueden tipificar para garantizar que se resuelvan con el tipo de datos esperado.
Uso básico de las promesas
Crear y usar promesas en TypeScript es sencillo. A continuación, se muestra un ejemplo de una promesa que se resuelve con una cadena:
function fetchData(): Promise {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched successfully!");
}, 1000);
});
}
fetchData().then((data) => {
console.log(data); // Outputs: Data fetched successfully!
}).catch((error) => {
console.error("Error:", error);
});
En este ejemplo, fetchData devuelve una promesa que se resuelve con una cadena. El método then maneja el valor resuelto, mientras que catch maneja los errores.
Manejo de promesas con Async/Await
TypeScript admite la sintaxis async/await, que proporciona una forma más legible de trabajar con promesas. A continuación, se muestra cómo usar async/await con promesas:
async function fetchDataAsync(): Promise {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched successfully!");
}, 1000);
});
}
async function processData() {
try {
const data = await fetchDataAsync();
console.log(data); // Outputs: Data fetched successfully!
} catch (error) {
console.error("Error:", error);
}
}
processData();
En este ejemplo, la función fetchDataAsync se declara como async, lo que le permite usar la palabra clave await para esperar a que se resuelva la promesa. Los errores se detectan mediante un bloque try/catch.
Escribir promesas con genéricos
TypeScript permite especificar el tipo de datos con los que se resuelve una promesa mediante el uso de genéricos. Esto garantiza que los tipos se gestionen correctamente en todo el código. A continuación, se muestra un ejemplo de una promesa tipificada:
interface User {
id: number;
name: string;
}
function fetchUser(): Promise {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ id: 1, name: "John Doe" });
}, 1000);
});
}
fetchUser().then((user) => {
console.log(user.id, user.name); // Outputs: 1 John Doe
}).catch((error) => {
console.error("Error:", error);
});
En este ejemplo, fetchUser devuelve una promesa que se resuelve con un objeto User. El tipo se especifica mediante genéricos, lo que garantiza la seguridad de tipos.
Uso de promesas en TypeScript con llamadas API
Las promesas se utilizan a menudo con llamadas a API para gestionar la obtención asincrónica de datos. El sistema de tipos de TypeScript ayuda a gestionar las respuestas de las API:
async function getUserData(userId: number): Promise {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error("Network response was not ok.");
}
const data: User = await response.json();
return data;
}
getUserData(1).then((user) => {
console.log(user);
}).catch((error) => {
console.error("Error:", error);
});
Este ejemplo demuestra cómo usar fetch para realizar una llamada a la API y manejar la respuesta mediante promesas y async/await. La respuesta se escribe como User, lo que garantiza la seguridad de tipos.
Conclusión
Trabajar con promesas en TypeScript proporciona mayor seguridad de tipos y claridad para operaciones asincrónicas. Al utilizar el sistema de tipado de TypeScript, la sintaxis async/await y los genéricos, los desarrolladores pueden administrar promesas de manera eficaz y crear aplicaciones más confiables.