Understanding the Type of a Class that Extends an Abstract Class in TypeScript

Описание: Learn how to properly define and instantiate an array of classes that extend an abstract class in TypeScript. This guide explains practical solutions and tips!
---
This video is based on the question https://stackoverflow.com/q/67797093/ asked by the user 'hf02' ( https://stackoverflow.com/u/13191339/ ) and on the answer https://stackoverflow.com/a/67797271/ provided by the user 'Frank Modica' ( https://stackoverflow.com/u/6382928/ ) 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: What is the type of a class that extends an abstract class?

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 the Type of a Class that Extends an Abstract Class in TypeScript

When working with TypeScript, you may often find yourself in situations where you need to define the type of a class that extends an abstract class. Today, we’re going to address a specific scenario where you have an abstract class, along with classes that extend it. The problem arises when you're unsure how to properly type an array containing these subclass references.

The Problem: Typing an Array of Extended Classes

Consider the following abstract class definition and the classes that extend it:

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

In this example, you want to create an array that holds references to the classes One and Two, which extend the abstract class AbstractClassToExtend. However, a common attempt to type the array like this:

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

results in an error when trying to instantiate a new object from the array:

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

This error is due to the fact that AbstractClassToExtend is abstract and cannot be instantiated directly.

The Solution: Using Concrete Classes as Type

To resolve this issue, you need to create a new concrete class that derives from your abstract class. Here’s how you can adjust your code:

Step 1: Create a Base Implementation

Instead of directly extending AbstractClassToExtend, create a separate concrete class called BaseImplementation:

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

Step 2: Define the Array Type Correctly

Next, you can define your array as follows:

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

Step 3: Instantiate Classes from the Array

Now you can easily instantiate classes from your array:

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

This structure allows you to manage and instantiate your classes without encountering abstract class instantiation errors.

Alternative Solution: Using Functions to Instantiate Classes

If you prefer another approach, consider creating an array of functions that return instances of your abstract type. Here’s how you can implement that:

Step 1: Create an Array of Factory Functions

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

Step 2: Instantiate Using Functions

You can then call the functions to receive concrete instances:

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

This method provides flexibility as each function precisely handles the instantiation of its designated class.

Conclusion

Handling type definitions for classes extending abstract classes can be tricky, especially in TypeScript. By creating a concrete base class or using factory functions for instantiation, you can effectively manage your class types and avoid instantiation errors. By adopting these techniques, you can enhance your TypeScript coding practices and build more robust applications.

The key takeaway is to ensure that you are not trying to instantiate abstract classes directly, and utilize concrete implementations or factory methods to facilitate this.

Happy coding!