What is the best way to organize multiple classes into an array?

Is it possible to create an array of classes in TypeScript? In vanilla JavaScript, this functionality is feasible:

class A {
    constructor() {console.log('constructor');}
    a() {}
}

const classesArray = [A];

new (classesArray[0])(); // Outputs 'constructor'

To ensure type safety for the array, an interface can be used. Here's an example of how this can be implemented in TypeScript:

interface Interface {
    a();
}

class A implements Interface {
    constructor() {console.log('constructor')}
    a() {}
}

const typedArray: Interface[] = [A];

new (typedArray[0])();

Upon compiling, an error occurs:

Error:(16, 21) TS2322: Type 'typeof A' is not assignable to type 'Interface'.
  Property 'a' is missing in type 'typeof A'.

This error indicates that

typeof A is not assignable to type 'Interface'
, implying that arrays cannot store classes as typeof is utilized for instantiated objects.

The objective is to consolidate all classes into a single variable without instantiation and access them by index. Is there a way to achieve this in TypeScript?

Answer №1

In object-oriented programming, interfaces play a crucial role in defining the properties and methods that are available on instances of classes. This concept is demonstrated through the following code snippet:

 const array: I[] = [new A()];

While this example may not directly address your specific requirement, it highlights the distinction between a class and an instance.

To clarify your intention, you should specify that "it's an array of types, and the new() function will return an instance of interface I".

A more accurate representation of this idea can be seen below:

class Test implements I {
    a() {}
}

interface I {
    a();
}

interface TI {
    new (): I;
}

const arr: TI[] = [Test];

const inst = new arr[0]();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cell renderers in Angular do not receive the ICellRendererParams during initialization

I am currently working on creating a cell renderer in Angular that converts IP addresses into clickable SSH links. Below is the code for the renderer component: import { Component, OnInit, OnDestroy } from "@angular/core"; import { DomSanitizer, ...

unable to modify the attributes of an object in Angular

I've been tasked with modifying an existing Angular project that includes a component where I have the following variable: public testRunDetails: ITestRunDetails[] = []; The variable testRunDetails is of type ITestRunDetails, which is defined as: exp ...

Typescript Imports Simplified for Snowpack

I am working with Snowpack and trying to import a Typescript package from Github packages using the following code: import SomeClass from '@myRepo/lib' However, I keep getting an error message saying: "/_snowpack/pkg/@myRepo.SomeClass.ts&qu ...

Can TypeScript declaration doc comments be translated and displayed in hover info and suggestion descriptions in VS Code?

English is not my native language, so I am wondering if there are translated versions available for the boxes that appear when hovering over a declaration to provide descriptions/documentation. For instance, with the String.prototype.split() method: ...

Create a function that takes advantage of a Promise to resolve its actions

In the asynchronous function provided below: export default async function getUserNames(id: string[]): Promise<string[]> { let userNames: string[] = []; // Additional actions such as service calls are performed here... return userNames; ...

Angular 2 - Constructing dates in constructor - Error: Type 'Date' cannot be assigned to type 'string'

In my attempt to generate a fresh date object for an ngx-chart by referencing this specific example, I came across the following code snippet: constructor() { this.data = this.multi.map(group => { group.series = group.series.map(dataItem =& ...

How do I condense nested keys in TypeScript?

If I have two types defined in TypeScript: interface Foo { bar: string; } interface Baz { foo: Foo; } Is it possible to flatten the Baz type in TypeScript (e.g. type FlatBaz = Flatten<Baz>), so that the signature appears similar to this? inte ...

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...

Tips on integrating Ionic 2 with Angular 2 services

I'm a beginner with Ionic 2. I came across information in the Angular 2 documentation stating that services need to be injected during application bootstrapping. However, I didn't see any mention of bootstrapping while following the Ionic 2 tuto ...

Limit the keys in TypeScript to only the elements of an array

Modified: Updating ID Types I have an array that contains the following values: const ids: number[] = [45, 56]; const obj: any = { 45: "HELLO", 56: "WORLD", }; I want to specify a type for my object to only allow values that are in my ids array. I ...

Prefer using 'as Movie[]' over '<Movie[]>' in @typescript-eslint/consistent-type-assertions rule suggestion

I am currently working with a Vuex store: type Movie = { title: string; id: number; } export default new Vuex.Store({ state: { searchList: <Movie[]>[], }, Upon compiling my code, an error is generated: The error message suggests to re ...

Clicking on a single checkbox causes the entire input to become deactivated due to the way the system is

I'm encountering a puzzling issue that has me feeling like I know the solution, yet I don't. I set "State" to [checked]. The problem arises when, upon turning it into a map and clicking just one checkbox, the entire selection is clicked. To addre ...

Empowering your Angular2 application with data binding

I am currently working with the following template: <table width="700"> <caption>All Users</caption> <thead> <tr> <th>name</th> <th>surname</th> < ...

Accessing clipboard contents upon button click using TypeScript

Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...

Error in React Typescript: Attempted to access properties of an undefined value

The new Object is displayed in the console but I'm still encountering an error const GetNo = (): string => { console.log(record); if (record.no !== "") return record.no; //<-- Cannot read properties of und ...

Customizing MUI V5 Variants

I'm having trouble customizing the variant options in MUIPaper, and I can't figure out what mistake I'm making. The available types for the component are: variant?: OverridableStringUnion<'elevation' | 'outlined', Pape ...

I am looking to modify a particular value within an array of objects, but for some reason, the update is not being applied correctly

When attempting to copy the array, I update the selected value of a specific object based on the matching memberId. This process works well for a single member, however, issues arise when there are multiple members as the updating doesn't work correct ...

A function that takes in a type identifier and a portion of a type, and then outputs the full type

I'm currently facing a challenge with TypeScript generics. I have several types (referred to as Animals) that each have a unique attribute, "type." Additionally, I have a function called createAnimal which takes the type of animal and a partial object ...

Dealing with the error "Type 'date[]' is not assignable to type '[date?, date?]' in a React hook

I'm attempting to assign a date range but encountering an error that states: Type 'Date[]' is not assignable to type '[Date?, Date?]'. Types of property 'length' are incompatible. Type 'number' is not assignab ...

Cypress Issue: Exceeded 5000ms Waiting for `cy.wait()`...No Network Request Detected

I recently decided to dive into building a React app using Vite, Chakra-UI, and TypeScript, incorporating Cypress for testing. The main objective was to expand my knowledge on these technologies. Interestingly enough, this marks my first experience with Cy ...