← Back to TypeScript Course | Chapter 21: Symbols and Iterators | Lesson 4 of 6

Generator Functions

Generator functions use the function* syntax and yield values one at a time. TypeScript can describe the yielded values, the value returned when the generator completes, and the type of values sent back through next.

Basic Generators

A generator function pauses execution at each yield and resumes only when next is called again — its return type Generator<TYield, TReturn, TNext> can describe all three of the values involved in that exchange.

Example: Basic Generators

typescript
function* countUp(): Generator<number, void, unknown> {
  yield 1;
  yield 2;
  yield 3;
}
console.log([...countUp()]);

Generator Return Values

A generator can return a final value once it completes normally (via a return statement inside the generator body), and the second type parameter of Generator describes exactly what type that return value is.

Example: Generator Return Values

typescript
function* gen(): Generator<number, string, unknown> {
  yield 1;
  yield 2;
  return "done";
}
const it = gen();
console.log(it.next(), it.next(), it.next());

Passing Values to Generators

The third Generator type parameter describes the type of values passed into the generator through next(value) — note the very first call to next starts the generator running, so any argument passed to that first call is ignored.

Example: Passing Values to Generators

typescript
function* echo(): Generator<string, void, string> {
  const input = yield "first";
  console.log("Received:", input);
}
const it = echo();
console.log(it.next());
it.next("hello");

Generators for Data Processing

Generators are ideal for producing sequences lazily, meaning each value is only computed when it's actually requested, rather than eagerly computing an entire array up front.

Example: Generators for Data Processing

typescript
function* lazyRange(end: number): Generator<number> {
  for (let i = 0; i < end; i++) yield i;
}
for (const n of lazyRange(3)) {
  console.log(n);
}

Generators and Iterable

Generator objects automatically implement the iterable protocol, so they can be consumed directly with for...of, spread into an array, or destructured — no extra wiring required.

Example: Generators and Iterable

typescript
function* fruits(): Generator<string> {
  yield "apple";
  yield "banana";
}
console.log([...fruits()]);
const [first] = fruits();
console.log(first);
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.