The process of exporting a singleton instance

I have created a new class called AppViewModel with a setting property set to 1:

class AppViewModel {
  setting: number = 1;
}

export = AppViewModel;

Afterward, I imported the class and instantiated it within another class named OrderEntry:

import AppViewModel = require("appViewModel");

class OrderEntry {
    appViewModel = new AppViewModel();
    doTest() {
        alert(this.appViewModel.setting);
}

}

The code functions correctly. However, I wish to change it to a singleton pattern. So, I updated the export statement as follows:

export var instance  = new AppViewModel();

Subsequently, I made a slight adjustment in the consuming class:

import AppViewModel = require("appViewModel");

class OrderEntry {
     appViewModel = AppViewModel;
     doTest() {
         alert(this.appViewModel.setting); //Error Here
  }
}

Unfortunately, upon compilation, an error was raised stating that:

Property setting does not exist on type.

How can I resolve this issue?

Answer №1

Here's a solution that worked for me:

let newInstance = new AppViewModel();
module.exports = newInstance;

Initially, Visual Studio was displaying the type as Any instead of AppViewModel. After making the above change, it recognized it correctly as an instance of AppViewModel.

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

Make sure the static variable is set up prior to injecting the provider

In our Angular6 application, we utilize a globalcontextServiceFactory to initialize the application before rendering views. This process involves subscribing to get configuration from a back-end endpoint and then using forkJoin to retrieve environment app ...

Change the Angular Material 2 theme from light to dark with a simple click

I'm working on an Angular 2 Material project and I want to be able to switch the theme from dark to light with a single click of a button. Can anyone help me figure out how to achieve this? Any tips or advice would be greatly appreciated! ...

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

Is there a way to access a specific tab index in Ionic 3.20 from a child page using a function call?

Imagine having a tabs page with 3 index pages. The first index page is the home page, the second is the products page, and the third is the cart page. When navigating from the home page to the search page, there is a button that you want to click in orde ...

What is the best way to store a gridster-item in the database when it is resized or changed using a static function

Following some resize and drag actions on my dashboard, I aim to store the updated size and position of my altered widget in my MongoDB database. Even though the gridster library offers the ability to respond to draggable and resizable events, these events ...

Creating a unique custom view in React Big Calendar with TypeScript

I'm struggling to create a custom view with the React Big Calendar library. Each time I try to incorporate a calendar component like Timegrid into my custom Week component, I run into an error that says react_devtools_backend.js:2560 Warning: React.cr ...

An error is triggered when an HttpClient post does not return any data

While sending a post request from my angular application to a web api, I am encountering an issue. The response from the api is supposed to be either a 200 status or a 404 status without any data being returned. An example of some headers for the 200 respo ...

Is there a way to keep a button in a "pressed" state after it has been clicked?

Could someone kindly share the code with me? I am looking for a button that remains pressed after clicking it. At times, I feel embarrassed for struggling with seemingly simple tasks. Grateful for any guidance or solution provided by this community! Man ...

Changing the title of your document and app bar in React Router when navigating pages

I'm looking into implementing the react router in a TypeScript project. How can I dynamically update the document title (document.title) and the app bar title (<span className="appbartitle">Home</span>) in a single page application based o ...

When attempting to transfer data from the parent component to child components, the data is appearing as undefined in the display

I have been working on passing data from a parent component to child components, but I keep encountering an issue where the data is showing as undefined. Below is the code snippet: Parent Component In this section, I have declared the variable part_data ...

What is the best approach for handling errors in a NestJS service?

const movieData = await this.movieService.getOne(movie_id); if(!movieData){ throw new Error( JSON.stringify({ message:'Error: Movie not found', status:'404' }) ); } const rating = await this.ratingRepository.find( ...

Can I utilize a specific interface type within another interface?

Can I pass an object along with its interface to a React component? Here's a sample of the interface I'd like to incorporate: interface TableProps { ObjectProps: Interface (not functioning properly); objects: Array<ObjectProps>; } Is i ...

Troubleshooting asynchronous problems with rxjs chaining within ngrx effects

@Effect({ dispatch: false }) public setJwtDataParcoursPage = this.actions$.pipe( ofType(INIT_FORM_SUCCESS_ACTION), map((action: InitFormSuccessAction) => action.payload), withLatestFrom(this.store.select(this._apiHeadersSelector.getJwt) as Observa ...

Guide to using Enums in *ngIf statements in Angular 8

I have defined an enum type in my TypeScript file, and I want to use it as a condition in my HTML code. However, when trying to access the "values" of the enum, they appear to be undefined even though I have declared them and inherited from the exported en ...

Alerting Users Before Navigating Away from an Angular Page

I am looking to implement a feature in my app that will display a warning message when attempting to close the tab, exit the page, or reload it. However, I am facing an issue where the warning message is displayed but the page still exits before I can resp ...

Vanilla JavaScript error: Unable to access property

I am working on implementing a header with a logo and navigation that includes a menu toggle link for smaller viewports. My goal is to achieve this using Vanilla JS instead of jQuery. However, when I click on the menu toggle link, I encounter the followin ...

What is the best way to utilize a variable from a function when using ngClass in Angular?

Currently, using Angular 4, I'm attempting to utilize ngClass by comparing a variable called sender which is created within a function with an object from an array known as item.sender. Below is the snippet of HTML code: <ion-card *ngFor="let ite ...

When the page hosted on Vercel is reloaded, `getStaticProps` does not function as expected

I'm currently working on a nextjs project and running into an issue where one of the pages returns a 404 error when it's reloaded. Within the page directory, I am using getStaticProps. pages - blogs.tsx - blog/[slug].tsx - index.tsx ...

Preventing Button Clicks in Angular 2 When Form Data is Modified

I am looking to determine if at least one field in my form has been altered. When this condition is met, the disableButton variable will be set to true, and false if there are no changes in the form. Here is the snippet of code I am currently using: // Th ...

Is it possible to compile TypeScript modules directly into native code within the JavaScript data file?

I am seeking a way to break down an app in a TypeScript development environment into separate function files, where each file contains only one function. I want to achieve this using TS modules, but I do not want these modules to be imported at runtime in ...