[타입스크립트] 제너레이터, 반복자(iterator) 추론과 명시

Generator

타입스크립트는 Generator가 yield를 통해 방출한 값을 토대로 반복자의 타입을 추론한다.

제너레이터 함수

반복자(iterator)와 제너레이터는 상생관계다.

제너레이터로 값의 스트림을 생성할 수 있고 반복자로 생성된 값을 소비할 수 있기 때문이다.

이터러블(iterable;반복할 수 있는)Symbol.iterator 라는 프로퍼티(반복자를 반환하는 함수)를 가진 모든 객체

반복자(iterator)next라는 메서드(value, done 두 프로퍼티를 가진 객체를 반환)를 정의한 객체

 

자바스크립트에서 제너레이터 함수를 호출하면 이터러블 반복자(IterableIterator)가 반환된다.

타입스크립트에서도 지원한다.

//다음 피보나치 숫자를 계산하기 위해 a에 b를, b에 a+b를 한번에 다시 할당한다.

function* createFibonacciGenerator() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let fiboancciGenerator = createFibonacciGenerator();
                                        //IterableIterator<number>
console.log(fiboancciGenerator.next()); //{ value: 0, done: false }
console.log(fiboancciGenerator.next()); //{ value: 1, done: false }
console.log(fiboancciGenerator.next()); //{ value: 1, done: false }
console.log(fiboancciGenerator.next()); //{ value: 2, done: false }
console.log(fiboancciGenerator.next()); //{ value: 3, done: false }
console.log(fiboancciGenerator.next()); //{ value: 5, done: false }
console.log(fiboancciGenerator.next()); //{ value: 8, done: false }
console.log(fiboancciGenerator.next()); //{ value: 13, done: false }

createFibonacciGenerator 를 호출하면 Symbol.iterator 프로퍼티와 next 메서드를 모두 정의한 값을 얻게 된다. 즉, 이터러블과 반복자 두 가지가 결합된 제너레이터가 반환된다.

위 코드의 createFibonacciGenerator 함수는 IterableIterator을 반환하고, 이 제너레이터에 next를 호출할 때마다 다음 피보나치 값을 계산해서 결과를 방출한다. 타입스크립트는 Generator가 yield를 통해 방출한 값을 토대로 반복자의 타입을 추론한다.

fiboancciGenerator를 호출하면 Symbol.iterator 프로퍼티와 next 메서드를 모두 정의한 값을 얻게 된다. 즉, 이터러블과 반복자 두가지가 결합된 제너레이터가 반환된다.

다음 예처럼 IterableIterator 에서 방출하는 타입을 감싸서 제너레이터 반환 타입을 명시하는 방법도 있다.

직접 명시할 수도 있다.

 

function* createNumbers(): IterableIterator<number> {
    let n = 0;
    while( 1 ){
        yield n++;
    }
}
let numbers = creatNumbers();
numbers.next() // {value: 0, done: false}
numbers.next() // {value: 1, done: false}
numbers.next() // {value: 2, done: false}

 

반복자(iterator)와 제너레이터(Generator는 호출될 때 Iterator를 자동으로 생성하는 특수 함수)는 상생관계다.

제너레이터로 값의 스트림을 생성할 수 있고 반복자로 생성된 값을 소비할 수 있기 때문이다.

 

 

이터러블(iterable;반복할 수 있는)

Symbol.iterator 라는 프로퍼티(반복자를 반환하는 함수)를 가진 모든 객체

- Symbol.Iterator 메서드가 구현되어 있어야 한다. 즉, 객체가 Symbol.iterator 키를 갖는 속성이 있어야 함
- Symbol.Iterator 는 Iterator을 반환해야 한다

 

반복자(iterator)

next라는 메서드(value, done 두 프로퍼티를 가진 객체를 반환)를 정의한 객체

- next 메서드를 가진다
- next 메서드는 value와 done 속성을 가진 객체를 반환한다.
- 작업이 끝나면 done은 true가 된다.

 

 

가령 createFibonacciGenerator 함수를 호출하면 Symbol.iterator 프로퍼티와 next 메서드를 모두 정의한 값을 얻게 된다. 즉, 이터러블과 반복자 두 가지가 결합된 제너레이터가 반환된다.

Symbol.iterator와 next를 구현하는 객체(또는 클래스)를 만들어 반복자나 이터러블을 직접 정의할 수 있다. 다음은 1에서 10까지의 숫자를 반복하는 반복자를 정의하는 예다.

  let numbers = {
    *[Symbol.iterator]() {
      for (let n = 1; n <= 10; n++) {
        yield n;
      }
    },
  };

사용자 정의 iterable

Symbol.iterator와 next를 구현하는 객체(또는 클래스)를 만들어 반복자나 이터러블을 직접 정의할 수 있다.

다음은 1에서 10까지의 숫자를 반복하는 반복자를 정의하는 예

이와 같이 자신의 반복가능 객체를 만들 수 있다

let numbers = {
  *[Symbol.iterator]() {
    for (let n = 1; n <= 10; n++) {
      yield n;
    }
  },
};

console.log([...numbers]);
<출력>
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

 

//커스텀 반복자
let numbers = {
  *[Symbol.iterator](){
    for(let n =1;n <= 10; n++){
      yield n;
    }
  }
}

이러한 사용자 정의 반복가능 객체에 대해서도 타입스크립트가 제너레이터 반환 타입을 추론

 

 

직접 명시도 가능

let numbers = {
  *[Symbol.iterator](): IterableIterator<number> {
    for (let n = 1; n <= 10; n++) {
      yield n;
    }
  },
};

for (let value of numbers) {
  console.log(value);
}

<출력>
1
2
3
4
5
6
7
8
9
10

 

 

<최종 점검>

let numbers = {
  *[Symbol.iterator](): IterableIterator<number> {
    for (let n = 1; n <= 10; n++) {
      yield n;
    }
  },
};

//for-of로 반복자 반복하기
for (let a of numbers) {
  console.log(a);
}
<출력>
1
2
3
4
5
6
7
8
9
10

//반복자 스프레드
let allNumbers = [...numbers];
console.log(allNumbers);

<출력>
[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

//반복자 구조 분해 할당(destructure)
let [one, two, ...rest] = numbers;
console.log(one);
console.log(two);
console.log(rest);

<출력>
1
2
[
  3, 4, 5,  6,
  7, 8, 9, 10
]