TypeScript에서 async 및 await 키워드는 비동기적인 작업을 수행하는 데 매우 유용합니다. 이러한 키워드를 사용하면 코드를 동기적으로 작성하는 것처럼 보이게 만들어 비동기 작업을 더 쉽게 다룰 수 있습니다. async 함수 내에서 await를 사용해 비동기 작업을 중단하고 완료될 때까지 대기할 수 있습니다.

async/await의 기본 사용법

아래 예시는 TypeScript에서 async 및 await를 사용해 Promise를 다루는 간단한 예제입니다.

async function fetchData(): Promise<void> {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

위 예제에서 fetchData 함수는 async로 선언되었습니다. 내부에서 await를 사용해 비동기적으로 데이터를 가져오고 있습니다.

비동기 작업의 중단과 재개

async/await를 사용하면 코드를 직관적으로 작성할 수 있습니다. 또한, 비동기 작업을 중단하고 재개할 수도 있습니다. 예를 들어, 사용자 입력이 필요한 경우 작업을 일시 중단하고 다시 시작할 수 있습니다.

아래는 async/await를 사용해 사용자가 버튼을 클릭할 때까지 대기하는 예제입니다.

async function waitForClick(): Promise<void> {
  await new Promise((resolve) => {
    const button = document.getElementById('myButton');
    button.addEventListener('click', () => {
      resolve();
    });
  });
  console.log('Button clicked!');
}

위 예제에서 waitForClick 함수는 버튼 클릭을 기다리기 위해 await를 사용해 Promise를 대기하고 있습니다.

마무리

TypeScript에서 async/await를 사용하면 비동기 작업을 보다 쉽게 다룰 수 있습니다. 이를 통해 코드를 더 읽기 쉽고 유지보수하기 쉽게 만들 수 있습니다. 또한, 작업을 일시 중단하고 재개할 수 있는 기능을 제공하여 사용자 입력이나 다른 이벤트에 대응하기에도 용이합니다.

이러한 이점들로 인해 async/await는 TypeScript에서 비동기 작업을 다룰 때 강력한 도구로 부각되고 있습니다.

더 많은 정보 및 예제는 TypeScript 공식 문서를 참고할 수 있습니다.