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.

この issue にはファイル、テスト、またはエントリポイントが記載されていません。まず、インターフェース階層の例と、要求されている階層および有効なメンバーのビューを確認し、その後、実装前に検査対象の範囲と期待される動作を明確にしてください。完了条件には、継承されたメンバーを追跡し、各メンバーが必要な理由を説明するための定義済みの方法が含まれます。