Repository: TypeScript
Issue: Highlight/Show Object Implementations
Labels: Suggestion,Awaiting More Feedback

# Suggestion

<!--
  Please fill in each section completely. Thank you!
-->

## 🔍 Search Terms

<!--
  💡 Did you know? TypeScript has over 2,000 open suggestions!
  🔎 Please search thoroughly before logging new feature requests as most common ideas already have a proposal in progress.
  The "Common Feature Requests" section of the FAQ lists many popular requests: https://github.com/Microsoft/TypeScript/wiki/FAQ#common-feature-requests

  Replace the text below:
-->

* Highlight Implementations

## ✅ Viability Checklist

<!--
   Suggestions that don't meet all these criteria are very, very unlikely to be accepted.
   We always recommend reviewing the TypeScript design goals before investing time writing
   a proposal for ideas outside the scope of the project.
-->
My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behavior of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).


## ⭐ Suggestion

For the TypeScript Language server it would be nice if when placing the cursor on an implementation, it would somehow show all the implemented items such as by highlighting them all in the object that implements them. As of now it only highlights the import or the implementation definition within the file.

```typescript
export declare interface OnChanges {
  onChanges(): void;
}
```

As with this implementation, when placing the cursor on `OnChanges`, only the import gets highlighted. Having some way of knowing what item(s) are implemented (and where within a large object) from `OnChanges` would be helpful without having to open the implementation.

```typescript
import { OnChanges } from './changes'

export class Example implements OnChanges {
  onChanges(): void {
    // Implementation
  }
}
```

Here is a possible example:

![implements example](https://user-images.githubusercontent.com/1571806/184499029-b7f81764-b590-4e88-b854-4fc0f4fdcea6.png)

The thought behind `goto` is that it would allow you to go to the position in the object as to where each token that is apart of the interface is located. Since you can have `class B extends A implement IA` and have some or all the implementations in `A` instead of `B`, goto would take you to class `A` instead somewhere within `B` as seen here:

[Playground](https://www.typescriptlang.org/play?ts=4.7.4#code/JYOwLgpgTgZghgYwgAgJIEFkG8BQzkCuAzhALIQAUAlAFzIBuA9sACYDcOAvjjggDZwiRZJmABbAA58IYiOGEZseQiXLUs3bjgD02kXz7JGUZEUazk4qTLlg4YYIxDC4UFKGQTXt5P0FFeASFkACFkCAAPSBAWYVFJaVl5NEwNIA)

```typescript
interface IA {
  useMe(): void;
}

class A implements IA {
  useMe(){}
}

// All or some implementations are in parent class
class B extends A implements IA {}
```