이번 포스트에서는 TypeScript에서 비동기 이터레이션을 어떻게 활용하고, await for...of 문을 통해 데이터를 효과적으로 처리하는 방법을 살펴보겠습니다.

1. 비동기 이터레이션

JavaScript에서 비동기 이터레이션은 Symbol.asyncIterator를 구현한 객체를 통해 가능합니다. TypeScript에서는 for await...of 문을 사용하여 비동기 이터레이션을 처리할 수 있습니다.

아래는 Promise를 반환하는 비동기 이터레이터 예제입니다.

async function* generateAsyncNumbers(max: number): AsyncGenerator<number> {
  for (let i = 0; i < max; i++) {
    yield await new Promise<number>((resolve) => setTimeout(() => resolve(i), 100));
  }
}

(async () => {
  for await (const num of generateAsyncNumbers(5)) {
    console.log(num);
  }
})();

2. await for…of 문을 활용한 데이터 처리

for...of 문은 배열이나 iterable 객체에 대해 순회하며 각 요소에 대해 작업을 수행할 때 유용합니다. TypeScript에서 await for...of 문을 사용하면 비동기적으로 요소를 처리할 수 있습니다.

다음은 await for...of 문을 사용하여 Promise 배열을 처리하는 예제입니다.

const asyncProcess = async (item: number): Promise<number> => {
  return new Promise<number>((resolve) => setTimeout(() => resolve(item * 2), 100));
};

(async () => {
  const items = [1, 2, 3, 4, 5];
  for await (const processed of items.map(asyncProcess)) {
    console.log(processed);
  }
})();

이와 같이 TypeScript에서 비동기 이터레이션과 await for...of 문을 활용하면 비동기 데이터를 효과적으로 처리할 수 있습니다.

결론

이번 포스트에서는 TypeScript에서 비동기 이터레이션과 await for...of 문을 활용한 데이터 처리 방법에 대해 알아보았습니다. 이를 통해 비동기 데이터를 보다 효율적으로 처리할 수 있게 되며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

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

관련 참고 자료:

• TypeScript 3.6 Release Notes
• Async Iteration - JavaScript.info