TypeScript는 JavaScript의 확장된 기능을 제공하며, 최신 JavaScript 기능을 활용하여 비동기 코드를 더 쉽게 작성할 수 있습니다. 이러한 비동기 코드를 작성할 때 async/await와 함께 제너레이터 함수를 사용하는 방법에 대해 알아보겠습니다.

1. 제너레이터 함수란?

제너레이터 함수는 함수 실행을 일시 중지하고 나중에 재개할 수 있는 개념을 제공합니다. 이를 통해 비동기 작업을 보다 쉽게 처리할 수 있습니다.

function* generatorFunction() {
  yield '첫 번째 값';
  yield '두 번째 값';
  yield '세 번째 값';
}

위 코드에서 generatorFunction은 제너레이터 함수로, yield 키워드를 사용하여 값을 생성합니다.

2. async/await와 함께 사용하는 방법

제너레이터 함수와 async/await를 함께 사용하여 비동기 코드를 작성할 수 있습니다.

async function asyncGeneratorFunction() {
  const result1 = await someAsyncOperation1();
  yield result1;

  const result2 = await someAsyncOperation2();
  yield result2;
}

위의 코드에서 asyncGeneratorFunction은 async 키워드와 함께 제너레이터 함수로 작성되었습니다. await 키워드를 사용하여 비동기 작업의 완료를 기다린 후 값을 생성합니다.

3. 사용 예시

async function asyncGeneratorExample() {
  const generator = asyncGeneratorFunction();
  const result1 = await generator.next(); // result1에는 someAsyncOperation1의 결과가 담깁니다.
  const result2 = await generator.next(); // result2에는 someAsyncOperation2의 결과가 담깁니다.
  console.log(result1.value, result2.value);
}

asyncGeneratorExample();

위의 코드는 asyncGeneratorExample 함수를 호출하여 asyncGeneratorFunction에서 생성된 값을 순차적으로 얻어와 콘솔에 출력하는 예시입니다.

제너레이터 함수와 async/await를 함께 사용하여 코드를 더 읽기 쉽고 관리하기 쉽게 작성할 수 있습니다.

이러한 TypeScript의 기능을 활용하여 보다 효율적으로 비동기 코드를 다룰 수 있습니다.

참고 자료:

• TypeScript 공식 문서
• MDN Web Docs 제너레이터