TypeScript TS2802 Error: Resolving Observer Pattern 'Set' Spread with Array.from Conversion

TypeScript Compile Error TS2802: Resolved with Observer Pattern by Converting Set Spread to Array.from

If you're stuck implementing the observer pattern due to TypeScript compile error TS2802, this post might help. I resolved the issue with a simple conversion: changing Set spread to Array.from().

Attempts and Pitfalls

While implementing the observer pattern, I encountered TypeScript compile error TS2802 when trying to spread a Set. Initially, I suspected the Set's type might be the problem, so I tried various approaches.

class Observer {
  private subscribers = new Set<() => void>();

  subscribe(callback: () => void) {
    this.subscribers.add(callback);
  }

  notify() {
    // TS2802 error occurs here
    for (const callback of [...this.subscribers]) {
      callback();
    }
  }
}

When attempting to spread the Set into an array using [...this.subscribers] as shown above, TypeScript failed to recognize it properly, throwing an error similar to TS2802: Cannot find module '...' or its corresponding type declarations.. At first, I thought it was a library configuration issue and spent a considerable amount of time lost.

The Cause

In the end, the problem lay with the Set spread syntax itself. When TypeScript applies the ... spread operator to a Set, there were instances where it couldn't accurately infer the types internally. This issue can be more pronounced in certain versions or environments.

The Solution

To resolve this, I used the method of explicitly converting the Set spread to an array using Array.from().

class Observer {
  private subscribers = new Set<() => void>();

  subscribe(callback: () => void) {
    this.subscribers.add(callback);
  }

  notify() {
    // Resolved by converting with Array.from
    for (const callback of Array.from(this.subscribers)) {
      callback();
    }
  }
}

By using Array.from(this.subscribers), TypeScript clearly recognizes the Set as an array, allowing the loop to execute correctly.

The Outcome

• The TypeScript compile error TS2802 was cleanly resolved.
• The observer pattern's notify method now functions as intended.
• I no longer have to waste time on unnecessary type-related debugging.

Summary — To Avoid the Same Pitfall

• [ ] If you encounter TS2802 errors when spreading a Set in TypeScript, try converting it with Array.from().
• [ ] Instead of blindly following error messages, focus on specific parts of your code (in this case, the Set spread).
• [ ] Before checking library configurations or type definitions, consider first improving the clarity of your code itself.