Intellisense for Symbol properties

[joelday]

Suggestion

🔍 Search Terms

With and without "is:issue is:open"
"symbol intellisense"
"symbol autocomplete"

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

Intellisense provides a list of symbol properties which, when accepted, insert indexed accessor syntax for that symbol. This list would be comprised of known symbols within the current scope or those that can be with an import statement.

📃 Motivating Example

This example demonstrates a type that implements the global Disposable interface introduced by TC39 ECMAScript Explicit Resource Management. (#54505)

class ExampleClass implements Disposable {
  [Symbol.dispose](): void {
    // ...
  }
}

const example = new ExampleClass();

example[Symbol.dispose]();

The suggestions shown for example. do not includeSymbol.dispose.

💻 Use Cases

TL;DR: Symbol.dispose and Symbol.asyncDispose are the first well-known symbols that are useful to call directly, and I want to easily know that they're there.

Typically, ES6 Symbols are intended as an implementation detail, but the new global Disposable interface, however, is analogous to this very prolific interface:

interface Disposable {
  dispose(): void;
}

In order to support using syntax, I need to implement the global Disposable interface. I have a few options:

• Switch to the global Disposable interface, but lose the visibility to developers of the lifecycle management requirements of implementations.
• Make my Disposable interface extend the global Disposable interface, or possibly merge it with the global one and then, by convention, do the following:

dispose(): void {
  // ...
}

[Symbol.dispose](): void {
  this.dispose();
}

An option is to create a utility class decorator that does that for me, but unfortunately that creates the issue of how to make that class recognized as an implementation of the global Disposable. (#4881)

[Andarist]

Related to #28364 and #52268 (comment)

[Andarist]

I have no real say on those matters really. I think though that:

• it would be good to have concrete suggestions for Symbol.iterator, Symbol.disposable etc instead of just Symbol
• those should have a low priority and should appear at the bottom of the list
• cursor placement after selecting the completion should make sense. Since the proposal is to offer auto-completions for concrete symbols then perhaps no changes would be needed here as the cursor already is positioned after the closing bracket

[Erbenos]

Another good application for this is declaration merging of interfaces of libraries, where eg.: new properties added by library consumers would be symbols, allowing for some level of future-proofing against clashes with newer iterations of library API.

Right now these extensions are omitted from autocomplete, possibly dissuading people from making such safe patches.