How to Fix TypeScript TS7057: 'yield' Expression Implicitly 'any' Type in Generator Functions (Missing Return-Type Annotation)

Table of Contents#

1. Understanding Generator Functions in TypeScript
2. What is TS7057? Explaining the Error
3. Why Does TS7057 Occur? Root Causes
4. How to Fix TS7057: Step-by-Step Solutions
5. Advanced Scenarios and Edge Cases
6. Best Practices to Avoid TS7057
7. Conclusion
8. References

Understanding Generator Functions in TypeScript#

Before diving into the error, let’s recap what generator functions are and how they work in TypeScript.

What Are Generator Functions?#

A generator function is defined using the function* syntax (note the asterisk). Unlike regular functions, generators can pause execution at yield statements, return intermediate results, and resume later. When called, they return a generator iterator object, which you control using next(), return(), or throw().

Example of a basic generator:

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}
 
// Usage
const iterator = numberGenerator();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

TypeScript and Generators#

TypeScript extends generators with type safety by allowing you to annotate the types of values yielded, returned, and passed to the generator via next(). This is where the Generator interface (or AsyncGenerator for async generators) comes into play.

What is TS7057? Explaining the Error#

TS7057 is a TypeScript error that reads:
'yield' expression implicitly has type 'any' because the return type of the generator function does not have an explicit type annotation.

When Does It Occur?#

This error arises when TypeScript cannot infer the type of the value returned by a yield expression. Without an explicit return type annotation on the generator function, TypeScript defaults to any for the yielded value, which violates strict type-checking rules (especially when noImplicitAny is enabled in tsconfig.json).

Example of Code Triggering TS7057#

// ❌ Triggers TS7057: 'yield' implicitly has type 'any'
function* fruitGenerator() {
  yield "apple";
  yield "banana";
  yield "cherry";
}
 
// Using the generator
const fruits = fruitGenerator();
const firstFruit = fruits.next().value; // Type of `firstFruit` is `any` (TS7057 error)

In this example, TypeScript cannot infer the type of yield "apple" (and subsequent yields) because the generator function fruitGenerator lacks an explicit return type. Thus, firstFruit is implicitly any, leading to the error.

Why Does TS7057 Occur?#

To fix TS7057, it’s critical to understand its root causes:

1. Missing Explicit Return Type Annotation#

Generator functions require an explicit return type annotation for TypeScript to infer the type of yielded values. Without it, TypeScript cannot determine the type of yield expressions, defaulting to any.

2. Strict Mode and noImplicitAny#

The error is more likely to appear when strict: true (or noImplicitAny: true) is enabled in tsconfig.json. This setting disallows implicit any types, making TS7057 a hard error instead of a warning.

3. Complex or Mixed Yield Types#

If a generator yields values of mixed types (e.g., numbers, strings, objects), TypeScript may struggle to infer a consistent type, even without strict mode. This ambiguity forces TypeScript to fall back to any.

How to Fix TS7057: Step-by-Step Solutions#

The primary solution to TS7057 is adding an explicit return type annotation to the generator function using TypeScript’s Generator interface. Let’s break this down.

Step 1: Understand the Generator Interface#

TypeScript provides the Generator generic interface to type generator functions. Its signature is:

interface Generator<Yield = unknown, Return = unknown, Next = unknown> {
  // ... methods like next(), return(), throw()
}

• Yield: The type of values yielded by the generator (returned by yield).
• Return: The type of the value returned by the generator when it completes (via return statement).
• Next: The type of values passed to the generator via iterator.next(value).

Step 2: Add an Explicit Return Type Annotation#

To fix TS7057, annotate your generator function with Generator<YieldType, ReturnType, NextType>.

Example: Basic Fix for the Fruit Generator#

// ✅ Fixed: Explicit return type annotation
function* fruitGenerator(): Generator<string, void, unknown> {
  yield "apple";
  yield "banana";
  yield "cherry";
}
 
// Now, TypeScript infers the correct types
const fruits = fruitGenerator();
const firstFruit = fruits.next().value; // Type: string (no error!)

Explanation:

• YieldType: string (all yielded values are strings).
• ReturnType: void (the generator does not return a value with return).
• NextType: unknown (we don’t pass values to next() in this example).

Step 3: Handle Generators with Return Values#

If your generator returns a value (e.g., via a return statement), specify the ReturnType:

// Generator that returns a value after yielding
function* countToThree(): Generator<number, string, unknown> {
  yield 1;
  yield 2;
  yield 3;
  return "Count complete!"; // Return type: string
}
 
const counter = countToThree();
console.log(counter.next().value); // 1 (number)
console.log(counter.next().value); // 2 (number)
console.log(counter.next().value); // 3 (number)
console.log(counter.next().value); // "Count complete!" (string)

Here, Generator<number, string, unknown> tells TypeScript:

• Yielded values are numbers.
• The final return value is a string.

Step 4: Handle Generators with next() Input#

If you pass values to the generator via next(), specify the NextType:

// Generator that accepts input via next()
function* accumulator(): Generator<number, void, number> {
  let total = 0;
  let input: number | undefined = yield total; // First yield returns 0 (initial total)
  
  while (input !== null) {
    total += input;
    input = yield total; // Yield updated total, wait for next input
  }
}
 
// Usage: Pass numbers to next()
const adder = accumulator();
adder.next(); // { value: 0, done: false } (initial yield)
adder.next(5); // { value: 5, done: false } (total = 0 + 5)
adder.next(3); // { value: 8, done: false } (total = 5 + 3)
adder.next(null); // { value: undefined, done: true } (exit loop)

Explanation:

• YieldType: number (yields the current total).
• ReturnType: void (no return value).
• NextType: number (values passed to next() are numbers).

Advanced Scenarios and Edge Cases#

Scenario 1: Mixed Yield Types#

If your generator yields mixed types (e.g., numbers and strings), use a union type for YieldType:

// Generator with mixed yield types
function* mixedGenerator(): Generator<number | string, void, unknown> {
  yield 100; // number
  yield "hello"; // string
  yield 200; // number
}
 
const mixed = mixedGenerator();
mixed.next().value; // Type: number | string
mixed.next().value; // Type: number | string

Scenario 2: Async Generators (AsyncGenerator)#

For async generators (using async function*), use AsyncGenerator<YieldType, ReturnType, NextType>:

// Async generator (yields Promises)
async function* fetchUsers(): AsyncGenerator<User, void, unknown> {
  const response = await fetch("/api/users");
  const users: User[] = await response.json();
  
  for (const user of users) {
    yield user; // Yields User objects wrapped in Promise
  }
}
 
// Usage (async/await)
async function logUsers() {
  for await (const user of fetchUsers()) {
    console.log(user.name); // Type: User (no error)
  }
}

AsyncGenerator vs. Generator:
AsyncGenerator yields Promise<YieldType> instead of YieldType directly. The for await...of loop handles the promises automatically.

Scenario 3: Using Type Inference (When Possible)#

In simple cases, TypeScript can infer the generator type if the yield types are consistent. However, explicit annotation is still recommended for readability:

// TypeScript infers Generator<number, void, unknown>
function* numberGenerator() {
  yield 1;
  yield 2;
}
 
// But explicit annotation is clearer:
function* numberGenerator(): Generator<number> { // Shorthand for Generator<number, unknown, unknown>
  yield 1;
  yield 2;
}

Note: Omitted type parameters default to unknown, but explicitly specifying them avoids ambiguity.

Best Practices to Avoid TS7057#

To prevent TS7057 and write robust generator functions:

1. Always Add Explicit Return Types#

Even if TypeScript can infer the type, explicit annotations (Generator<Yield, Return, Next>) make your code self-documenting and prevent regressions when the generator logic changes.

2. Enable Strict Mode#

In tsconfig.json, set strict: true (or noImplicitAny: true) to catch implicit any errors early:

{
  "compilerOptions": {
    "strict": true, // Enables noImplicitAny, among other checks
    "target": "ES2020"
  }
}

3. Use Type Aliases for Complex Generators#

For generators with complex Yield, Return, or Next types, use a type alias to simplify:

type NumberStringGenerator = Generator<number | string, boolean, unknown>;
 
function* mixedGenerator(): NumberStringGenerator {
  yield 1;
  yield "two";
  return true;
}

4. Avoid Mixed Yield Types#

Where possible, keep yielded values of a single type to simplify type annotations and improve type safety.

Conclusion#

TS7057 occurs when TypeScript cannot infer the type of yield expressions due to a missing return type annotation on a generator function. The fix is straightforward: annotate the generator with Generator<YieldType, ReturnType, NextType> to explicitly define the types of yielded values, return values, and input values.

By following the steps outlined—adding explicit return types, leveraging the Generator interface, and adhering to strict mode—you can eliminate this error and write type-safe, maintainable generator functions in TypeScript.

References#

• TypeScript Documentation: Generator Functions
• TypeScript Generator Interface
• TypeScript AsyncGenerator Interface
• TypeScript Strict Mode
• MDN: JavaScript Generator Functions