TypeScript 및 Promises를 사용하는 방법

TypeScript는 정적 유형을 추가하여 JavaScript 개발을 향상시킵니다. 비동기 코드로 작업할 때, 약속은 미래에 완료되는 작업을 처리하는 데 사용됩니다. TypeScript는 유형 안전성과 명확성을 갖춘 약속을 관리하는 도구를 제공합니다. 이 가이드는 기본 사용에서 고급 시나리오에 이르기까지 TypeScript에서 약속을 사용하는 방법을 살펴봅니다.

약속 이해하기

promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 작업의 결과 또는 오류를 처리하는 메서드를 제공합니다. TypeScript에서 약속은 예상 데이터 유형으로 해결되도록 유형화할 수 있습니다.

약속의 기본 사용법

TypeScript에서 약속을 만들고 사용하는 것은 간단합니다. 다음은 문자열로 해결되는 약속의 예입니다.

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);
});

이 예에서 fetchData는 문자열로 해결되는 약속을 반환합니다. then 메서드는 해결된 값을 처리하는 반면, catch는 모든 오류를 처리합니다.

Async/Await를 사용한 약속 처리

TypeScript는 async/await 구문을 지원하는데, 이는 약속을 다루는 더 읽기 쉬운 방법을 제공합니다. 다음은 약속과 함께 async/await를 사용하는 방법입니다.

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();

이 예에서 fetchDataAsync 함수는 async로 선언되어 await 키워드를 사용하여 약속이 해결될 때까지 기다릴 수 있습니다. 오류는 try/catch 블록을 사용하여 포착됩니다.

제네릭을 사용한 약속 타이핑

TypeScript는 제네릭을 사용하여 약속이 해결하는 데이터 유형을 지정할 수 있습니다. 이를 통해 코드 전체에서 유형이 올바르게 관리됩니다. 다음은 유형화된 약속의 예입니다.

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);
});

이 예에서 fetchUser는 User 객체로 해결되는 약속을 반환합니다. 유형은 제네릭을 사용하여 지정되어 유형 안전성을 보장합니다.

API 호출을 사용하여 TypeScript에서 약속 사용

약속은 종종 API 호출과 함께 비동기 데이터 페칭을 처리하는 데 사용됩니다. TypeScript의 유형 시스템은 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);
});

이 예제는 fetch를 사용하여 API 호출을 하고 promise와 async/await를 사용하여 응답을 처리하는 방법을 보여줍니다. 응답은 User로 입력되어 유형 안전성을 보장합니다.

결론

TypeScript에서 약속을 사용하면 비동기 작업에 대한 향상된 유형 안전성과 명확성이 제공됩니다. TypeScript의 타이핑 시스템, async/await 구문 및 제네릭을 사용하면 개발자는 약속을 효과적으로 관리하고 보다 안정적인 애플리케이션을 빌드할 수 있습니다.