How to Properly Type Hint an Array of Classes in TypeScript

Learn how to resolve type hinting issues with classes in TypeScript, specifically when using arrays of classes.
---

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: Type hint array of classes in typescript

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Problem: Type Hinting an Array of Classes in TypeScript

TypeScript's strong typing can sometimes lead to confusion, especially when dealing with arrays of classes. Many developers encounter type hinting errors when trying to create an array of classes and invoke their methods. If you've faced an error like “Property 'booted' does not exist on type 'string'”, you're not alone. In this guide, we will break down how to properly type hint an array of classes in TypeScript and resolve this misunderstanding.

The Scenario

Let's consider the following scenario: you have a class that accepts an array of providers, and each provider has booting and booted methods that you want to call. Here’s a simplified version of your current code:

Class Implementation

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

Using the Class

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

AppProvider Class

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

The issue arises when you attempt to access the methods booting and booted on the providers, leading to the error message indicating that TypeScript thinks you're trying to use strings instead of class instances.

The Solution: Use Constructor Types

Why the Error Occurs

The crux of the issue lies in how you define the array. When you use Array<Provider>, TypeScript expects an array of instances of the Provider class, not the class itself. This is why the compiler gets confused when it doesn’t find methods like booted on a string type.

Defining the Constructor Type

To resolve this, you should use the constructor type for your class, which allows you to create instances within your boot method. Here's how you can modify your implementation:

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

Code Breakdown

Array<new () => Provider>: This tells TypeScript that it’s an array of class constructors that return instances of Provider.

new Provider(): We instantiate the provider within the loop to access the methods booting and booted.

Conclusion

By understanding the difference between instance types and constructor types in TypeScript, you can resolve the issues with type hinting an array of classes. Now, whenever you need to manage an array of classes or providers, you can apply this pattern to improve your TypeScript code quality and functionality.

Final Thoughts

TypeHinting enhances the robustness of your TypeScript applications, making it crucial to grasp these concepts. For ongoing learning, stay updated with TypeScript’s best practices. Happy coding!