타입스크립트 베이스캠프

비동기

1. 비동기 처리

1.1 Promise와 async/await 타입 지정

TypeScript에서 비동기 작업을 처리할 때는 Promise 타입을 사용합니다. 특히 API 호출이나 파일 처리 같은 작업에서 자주 사용됩니다.

// 기본적인 Promise 타입 사용
interface User {
    id: number;
    name: string;
    email: string;
}
 
// Promise를 반환하는 함수 정의
async function fetchUser(id: number): Promise<User> {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
}
 
// 실제 사용 예제
async function displayUserInfo(id: number): Promise<void> {
    try {
        const user = await fetchUser(id);
        console.log(`${user.name}의 이메일: ${user.email}`);
    } catch (error) {
        console.error('사용자 정보를 가져오는데 실패했습니다.');
    }
}

// 기본적인 Promise 타입 사용
interface User {
    id: number;
    name: string;
    email: string;
}
 
// Promise를 반환하는 함수 정의
async function fetchUser(id: number): Promise<User> {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
}
 
// 실제 사용 예제
async function displayUserInfo(id: number): Promise<void> {
    try {
        const user = await fetchUser(id);
        console.log(`${user.name}의 이메일: ${user.email}`);
    } catch (error) {
        console.error('사용자 정보를 가져오는데 실패했습니다.');
    }
}

💡 async 함수는 자동으로 Promise를 반환합니다. 명시적인 타입 지정으로 코드의 의도를 더 명확하게 만들 수 있습니다.

2. 연습문제

비동기 함수 타입 지정:

// TODO: 아래 함수의 반환 타입을 지정하고, 
// 적절한 인터페이스를 만드세요
async function fetchUserOrders(userId) {
    const response = await fetch(`/api/users/${userId}/orders`);
    return response.json();
}

// TODO: 아래 함수의 반환 타입을 지정하고, 
// 적절한 인터페이스를 만드세요
async function fetchUserOrders(userId) {
    const response = await fetch(`/api/users/${userId}/orders`);
    return response.json();
}

3. 연습문제 해답

비동기 함수 해답:

interface Order {
    id: number;
    productId: number;
    quantity: number;
    totalPrice: number;
}
 
async function fetchUserOrders(userId: number): Promise<Order[]> {
    const response = await fetch(`/api/users/${userId}/orders`);
    return response.json();
}

interface Order {
    id: number;
    productId: number;
    quantity: number;
    totalPrice: number;
}
 
async function fetchUserOrders(userId: number): Promise<Order[]> {
    const response = await fetch(`/api/users/${userId}/orders`);
    return response.json();
}