Is it possible to store the reference of a class in a variable so that it can be instantiated at a later time?

My goal is to ensure that a class implements a method called okClick, so I decided to use an interface.

interface BaseComponent {
  okClick(): void
}

I then created a class that implements this interface.

class ComponentImplementation implements BaseComponent {
  okClick(): void {
    // ok button clicked
  }
}

In order to dynamically create instances of these components using Angular's createComponent(), I tried storing them in a variable of type BaseComponent.

class Implementation {
  // TS2741: Property 'okClick' is missing in type 'typeof ComponentImplementation' but required in type 'BaseComponent'.
  tempVar: BaseComponent = ComponentImplementation

  constructor() {
    // dynamically create the Angular component from tempVar
  }
}

However, the assignment of the class to the variable tempVar fails to recognize the okClick function.

I would appreciate any suggestions on how to define the type of tempVar to correctly hold classes implementing the BaseComponent interface.

Answer №1

When you declare tempVar as type BaseComponent, TypeScript interprets it as expecting an instance of BaseComponent, not a constructor that produces a BaseComponent. This distinction becomes apparent in the error message: it indicates that "onClick" (an instance method) is not accessible on the type "typeof ComponentImplementation" (the constructor function). The same error occurs when attempting to specify tempVar: ComponentImplementation.

If BaseComponent were a class, you could use typeof BaseComponent to define tempVar, but since it's simply an interface, this approach is not viable. However, in the case of tempVar: ComponentImplementation,

tempVar: typeof ComponentImplementation
can be employed successfully.

An alternative solution involves introducing another interface for a BaseComponentConstructor:

interface BaseComponentConstructor {
    new(): BaseComponent
}

You can then assign the type of tempVar as follows:

tempVar: BaseComponentConstructor = ComponentImplementation

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

Using [(ngModel)] on a field within an object that is nested inside another object

I am facing a challenge as I attempt something that may or may not be feasible. Within an Angular form, I have an object structured like this: export class NewUserRegisterModelDTO{ userData:UserDetailModelDTO; roles:RoleModelDTO[]; ownerData:O ...

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

One issue I am facing is that the default value of the text field is zero, but when I submit the form, the value of the text field becomes an empty string instead. This is not the intended behavior as I want the value to remain zero in the end. How can I r ...

Leveraging Angular2 for Azure AD authentication

Currently working with Angular2 and looking to authenticate users through Azure AD. I came across ADALjs, but it's specifically for Angular1. I also found this https://www.npmjs.com/package/angular2-adal#adalService, however it appears to still be in ...

Struggling to correctly showcase my Firebase data in Angular using the orderByChild method

I have a user database structured like this : Database - Users - Id (generated using the push method) - email - firstName - ptsTotal - ... I am looking to create a ranking of users based on their total points (ptsTotal) in a game using ...

Ways to resolve the angular error "Encountering an unhandled exception: Unable to locate module 'typescript' "?

I'm encountering errors when running ng serve. I've attempted the following code as well, but I'm still facing the same error: npm install -g typescript https://i.sstatic.net/Gyi71.png Error displayed in text format D:\xampp\htd ...

The behavior of Angular redirecting after login is quite unusual

I have an Angular component named Login. After a successful login, I want the page to refresh along with the navigation bar and then redirect to another component called 'welcome'. Here is the code snippet: import { TokenStorageService } from ...

Creating dynamic Angular child routes with variable initial segment

Recently, I've been working on a new project to set up a blogging system. The next step in my plan is to focus on the admin section, specifically editing posts. My idea for organizing the routes is as follows: /blog - Home page /blog/:slug - Access ...

Implementing React with CSS styling is a popular way to provide

I am facing an issue with a reusable component that is supposed to handle two different states based on the use case. The problem arises when trying to apply CSS styles depending on which state is provided. For some reason, it only applies the styles from ...

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

Managing time in an Angular application using Typescript

I am facing an issue with formatting the time obtained from an API in my FormArray. The time is received in the format: 14.21.00 My goal is to convert this time to the following format: 2:21 PM I have attempted to format it using Angular's DatePip ...

Extract keys from a list of interface keys to create a sub-list based on the type of value

Issue Can the keys that map to a specified value type be extracted from a TypeScript interface treated as a map? For example, consider the WindowEventMap in lib.dom.d.ts... interface WindowEventMap extends GlobalEventHandlersEventMap, WindowEventHan ...

When setting a value through the DOM, the input's value bound with ngModel in Angular does not get updated

Trying to upload a file to calculate its hash and display it in an input box. If done correctly, the value should show in the form, but when submitting the form, the value does not get sent. Only adding a blank space by clicking on the input field works: ...

Error display in Elastic Apm Rum Angular implementation

Having some issues with incorporating the @elastic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5948598d8878098d8949b9280999487b5c7dbc4dbc4">[email protected]</a> package into my project. Angular is throwing console ...

Update the names of the output fields within the returned object from the API

Recently I delved into nodejs and typescript to create an API using express. I attempted to return a custom object in my API structured as follows: export class Auction { private _currentPrice:number = 0; private _auctionName:string; public ...

Ways to create distance between elements within a row

Trying to align 3 cards in a row within an angular 10 project has been challenging. While the cards line up horizontally on mobile devices, I'm struggling to create proper spacing between them on desktop. I've attempted adjusting margins and padd ...

Encountering an error due to an invalid type union when creating a new instance of a

My TypeScript code includes a Logger class that has an optional options parameter in its constructor. The options parameter includes a class generic C which represents custom levels. These custom levels are used within the class for methods like log(level: ...

The children prop in React Typescript is specified in the props type, but for some reason it is not being

I am currently developing a component library using a combination of React, TypeScript, Styled Components, and Rollup. One of the components I have created is a Button component, defined using a type interface. After rolling up the library and importing th ...

BarChart is failing to exhibit data in tooltips when using dynamic keys

Query Description Hello! I'm currently tackling an issue with a bar chart. Everything is working smoothly, except for the default tooltip, which appears blank when hovering over the bars. My chart utilizes dynamic keys for the legends, and they are f ...

Reset Angular Material autocomplete upon selection

The issue I'm encountering is as follows: when an option is chosen from the autocomplete input, it should not only add a chip to the Angular Material Chips component (which it currently does), but also clear the autocomplete input so that another opti ...

Issue: The canActivateChild method in the child guard is not functioning as

Following the Angular documentation, I attempted to implement a child guard in my code: @Injectable() export class AuthGuardService implements CanActivate, CanActivateChild { constructor(private authService: AuthentificationService, private router: Rou ...