Скачать или смотреть Understanding Type Checking with TypeScript Interface Inheritance

Learn how to perform type checking with TypeScript interface inheritance effectively and explore an innovative approach to distinguishing between sub-interfaces.
---
This video is based on the question https://stackoverflow.com/q/63720001/ asked by the user 'Dolf Andringa' ( https://stackoverflow.com/u/867162/ ) and on the answer https://stackoverflow.com/a/63721207/ provided by the user 'Matthew Layton' ( https://stackoverflow.com/u/1033686/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: type check with typescript interface inheritance

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Type Checking with TypeScript Interface Inheritance

When working with TypeScript, one of the common challenges developers face is efficiently managing type checks when dealing with interfaces and inheritance. In this guide, we’ll break down a specific scenario involving interfaces, how they can inherit from one another, and how to manage them gracefully in a service class without cumbersome manual checks.

The Problem: Distinguishing Between Extended Interfaces

Let’s say you have defined an interface called Layer, and two sub-interfaces, SubLayer and AnotherLayer, that extend it:

[[See Video to Reveal this Text or Code Snippet]]

You also have a service class, LayerDataService, with a function designed to handle various types of Layer arguments. The challenge arises when you need to differentiate between the SubLayer and AnotherLayer instances to call the appropriate methods:

[[See Video to Reveal this Text or Code Snippet]]

The key issue is determining how to identify which type of Layer instance you’re dealing with without using instanceof, as interfaces in TypeScript do not have runtime representations.

The Solution: Inverting the Dependency

Since interfaces do not exist at runtime, and you cannot leverage traditional type checks, a novel approach would be to invert the control, allowing the Layer itself to dictate how its behavior is executed. Here’s how you can adapt your design:

Step 1: Modify the Layer Interface

Introduce a method within the Layer interface, so each layer knows how to handle its type:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Update the Service Class

Make your service methods rely on this method:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Implement the Method in Each Sub-interface

In the implementations of SubLayer and AnotherLayer, you simply define how the method get behaves:

[[See Video to Reveal this Text or Code Snippet]]

Benefits of This Approach

Clarity: Each layer clearly indicates how it should be handled within the LayerDataService.

Decoupling: This method reduces the need for excessive type checking and keeps your service class clean.

Conclusion

By reversing the typical dependency, where the Layer itself manages how it interacts with the service, you overcome the limitations imposed by interface erasure in TypeScript. This approach not only simplifies your type-checking logic but also enhances the readability and maintainability of your code.

Now you're equipped to manage interface inheritance in TypeScript more elegantly! If you have any questions about this approach or want to share your experiences while working with interfaces, feel free to comment below.