타입스크립트는 자바스크립트의 상위 집합으로, 비동기 데이터 처리를 위한 다양한 기능을 제공합니다. 이 포스트에서는 타입스크립트에서 비동기 데이터를 처리하는 방법에 대해 알아보겠습니다.

Promise 활용

Promise는 비동기 작업을 수행하고 그 결과를 나중에 처리하기 위한 객체입니다. Promise를 사용하여 비동기 작업을 처리할 때, 타입스크립트는 Promise의 제네릭을 이용하여 반환되는 값의 타입을 명시할 수 있습니다.

예를 들어, 다음은 Promise를 사용하여 비동기 데이터를 처리하는 간단한 예제입니다.

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

fetchData().then((data) => {
  console.log(data);
});

위의 코드에서 fetchData 함수는 문자열 타입의 Promise를 반환합니다. 그리고 나중에 결과를 처리하기 위해 then 메서드를 사용하여 처리할 수 있습니다.

async/await 활용

async 및 await 키워드를 사용하면 Promise를 보다 간편하고 동기적으로 다룰 수 있습니다. async 키워드를 함수 앞에 붙여 해당 함수가 비동기 함수임을 명시하고, await 키워드를 사용하여 Promise가 처리될 때까지 기다릴 수 있습니다.

아래는 async 및 await를 사용하여 비동기 데이터를 처리하는 예제입니다.

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

async function displayData() {
  const data = await fetchData();
  console.log(data);
}

displayData();

위의 코드에서 displayData 함수가 async로 선언되었으며, await를 사용하여 fetchData 함수가 Promise를 반환할 때까지 기다립니다. 이를 통해 코드가 보다 간결하고 가독성이 높아집니다.

결론

타입스크립트는 Promise와 async/await를 활용하여 비동기 데이터를 처리하는 강력한 기능을 제공합니다. 이를 통해 코드의 가독성을 높이고 비동기 작업을 보다 편리하게 다룰 수 있습니다.

이상으로 타입스크립트에서의 비동기 데이터 처리 방법에 대한 내용을 살펴보았습니다.

참고문헌:

• 타입스크립트 공식 문서