Inspect interface composition hierarchy and its full set of members

Search Terms

interface extends hierarchy, interface extends tree, interface tree

Suggestion

Inspired by the recently introduced function call tree, I would like to propose a similar kind of feature allowing for easy inspection of an interface's hierarchical composition of other interfaces.

Use Cases

Interfaces are great for dependency inversion and its extends allows for interface segregation. This proposed inspection feature would add the kind of super fluffy developer experience that encourages both principles to be used more liberally.

Currently, when the segregated interfaces are finally composed at some kind of top level and one needs to provide all required functionalities, one would need to keep checking what members are still missing. If a member turns up by surprise, it would take recursive Ctrl+click through all subjects of extends to see where that unexpected member is required. This alone is off-putting when one deals with a complex project and would like to keep unit dependencies as small as possible.

With this proposed inspector, one would be able write a unit module, quoting its dependent interfaces without needing to worry that the final composition way up would be hard to trace. There would be very little temptation/excuse to define some kind of God-interface, whose only one or two members are used by any module at a time.

(FWIW in my projects I'm already pursuing dependency inversion in full force and it pays great maintainability dividends. Even with the recursive click-through it is still significantly easier to reason with IMO than God interfaces.)

Examples

For instance, for something like this (in reality, these interfaces would likely live in different files):

interface A { /* ... */ }
interface B { /* ... */ }
interface C extends A { /* ... */ }
interface D extends B { /* ... */ }
interface E extends C, D { /* ... */ }

would give rise to this tree upon inspecting E:

E
+- C
|  +- A
+- D
|  +- B
+- A
+- B

plus a view that shows all effective members of E.

I'm not sure how the listing of members would work precisely, but for starters it would be good to be able to use it to answer questions like:

1. What methods do I now expect to provide?
2. Why do I have to implement method X? (For those familiar with Yarn, it would be like yarn why on an interface member.)

I'm sure others can come up with more suggestions on the desirable dev-experience around the core idea.

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, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

The issue mentions no files, tests, or entry points. Start by reviewing the example interface hierarchy and the requested hierarchy and effective-member views, then clarify the inspection surface and expected behavior before implementation. Done would include a defined way to trace inherited members and explain why each member is required.