Unleashing the power of TypeScript with Solid JS Abstract Class

Why am I getting an undefined error for my calcUtilisation method when using an Abstract Class as the type in createStore? Is there a way to utilize a type for the data along with a method within the same class for createStore?

abstract class Account  {
  abstract name: String;
  abstract creditUsed: number;
  abstract creditLimit: number;

  public calcUtilisation() {
    return (this.creditUsed / this.creditLimit) * 100;
  }
}

interface State {
  accounts: [Account] | []
}

const [store, setStore] = createStore<State>({
  accounts: []
});

const addAccount: Store<State> = (account: Account) => {
  setStore({...store, accounts: [
    ...store.accounts,
    account
  ]});

  return store;
}

addAccount({ name:"Barclays", creditUsed: 11600, creditLimit: 13600 });

console.log(store.accounts.calcUtilisation)

Answer №1

Due to the fact that store.accounts is an array, it does not contain a calcUtilisation method. To access this method, you need to specify a particular element within the array, for example:

console.log(store.accounts[0].calcUtilisation)

Even then, the method will still be undefined because it has not been defined in this context:

addAccount({ name:"Barclays", creditUsed: 11600, creditLimit: 13600 });

The object passed into addAccount does not include the calcUtilisation method. You can either manually add it to this object or create a specific subclass constructor that extends your abstract class and instantiate it here, like so:

class ConcreteAccount extends Account {
  constructor(accountObject) {
    this.name = accountObject.name;
    this.creditUsed = accountObject.creditUsed;
    this.creditLimit = accountObject.creditLimit;
  }
}

addAccount(new ConcreteAccount({ name:"Barclays", creditUsed: 11600, creditLimit: 13600 }));

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

The Facebook bots are unable to crawl our AngularJS application because the JavaScript is not being properly

I have a unique setup where my website is built with AngularJS and Wordpress as a single page application. Depending on the routing of the page, I dynamically define meta tags in the controller. Here's a snippet of my HTML header: <meta property=" ...

Determine the absent information by comparing two JSON objects with JavaScript

Two JSON objects, counties and ctyIndem, are at hand. The counties object contains all the counties in a specific US State, while ctyIndem holds information about indemnities paid in that State by county, excluding those with no payments made. My task is t ...

What is the reason for Nightwatch running each .js file as a Child process? Could it be due to alterations in the configuration settings

Recently, I've been experiencing an issue when running Nightwatch.js where my console is spawning child processes for every .js file in each folder and subfolder. Multiple Chrome instances are opening along with them and even the module folders with r ...

Unable to import necessary modules within my React TypeScript project

I am currently building a React/Express application with TypeScript. While I'm not very familiar with it, I've decided to use it to expand my knowledge. However, I've encountered an issue when trying to import one component into another comp ...

Error message "$injector:unpr" occurs in the run method of AngularJS after minification process

I've encountered an issue with angular-xeditable on my Angular app. While it functions properly in the development environment, I'm facing an error in production when all JS files are minified: Uncaught Error: [$injector:strictdi] http://errors. ...

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

"I'm trying to figure out the best way to use Selenium and Python to send a character sequence to a contenteditable element that has its attribute set

Recently, I've been experimenting with using Python 3.6 and Selenium to automate a simple task - logging into a chat website and sending messages automatically. is the webpage where I want to send the messages. Despite my limited experience with Py ...

Do not proceed with the form submission if the fields are left blank

I am facing a challenge with organizing two sets of data, "heat" and "cold", obtained from an external provider. The data is messy and I have trimmed down the code to focus on the main issue at hand. Both "heat" and "cold" have properties that users need t ...

Alignment of Material-UI dialogue buttons on the left side

I have a Dialog containing three buttons as shown below: https://i.stack.imgur.com/T6o35.png Here is the JSX code: <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} > <Button classes={{ root: this.props ...

Extra spaces within the source code visible after the page has been processed by Angular

Within my angular application, I am retrieving a list of addresses from a service that provides an object structured like this: { Flat: "10B", BuildingName: "Some Building", Line: "10B Some Building Road Town POST CODE", Postcode: "POST CODE", ...

Unable to retrieve input using jquery selector

I am attempting to detect the click event on a checkbox. The Xpath for the element provided by firebug is as follows, starting with a table tag in my JSP (i.e. the table is within a div). /html/body/div[1]/div/div/div[2]/div/div[2]/div[1]/div/div[2]/table ...

AngularJS secondary controller experiencing malfunctions

Having an issue with my second controller (RegisterController) in the module I've created. The first one is working perfectly fine. I have both controllers in a file named user.js var app = angular.module("User", []); app.controller('LoginCont ...

Encountering an error while attempting to merge webgl_interactive_cubes with pointer lock in three.js: "Unable to access properties of undefined (reading 'getHex')."

I’m in the process of developing a scene with walk-navigation and interactive objects for educational purposes. To achieve this, I am utilizing the Pointer Lock Control example for walk navigation and the interactive cubes example from three.js. The proj ...

Place content following a three.js display created within a <div id="mainWindow">

Recently, I created a small Three.js animation and embedded it in my HTML page like this: <div id="mainWindow" class="popup_block"> <!-- JavaScript for simulation --> <script src="../temp/webgl-debug.js"></script> <scri ...

Encountered an error in Discord.js: Undefined properties unable to be read (execute)

Here is the code snippet from my main file: const { Client, IntentsBitField, Collection, intents, SlashCommandBuilder } = require('discord.js') const { TOKEN, PREFIX } = require('./config.json') const fs = require('fs'); const ...

A distinct handler function designed for a dynamically generated form

I have 3 MaterialUI TextFields that are rendered n number of times based on user input (stored in a variable named groupMembersCount) in a functional ReactJS component using the useState hook: const [groupDetails, setGroupDetails] = React.useState([ { ...

Unable to display image source in viewport

Currently, I am working on developing a basic ionic app that interacts with an API that I have created. I am encountering an issue where all data is being displayed correctly in the view except for the src attribute of an image. When I use console.log to c ...

Attempting to showcase a PDF document within a web browser

I am a newcomer to JavaScript and I'm encountering an issue with displaying a PDF file in the browser. Every time I try to do so, I keep receiving the same error message 'Cannot GET...' Despite trying various methods... router.get("/en ...

Attempting to recreate the dynamic banner featured in the video

Looking to replicate a setup similar to what was demonstrated in the video. I have two div blocks - one with a random image and the other with a video, and I want them to be as flexible and identical as possible to the video layout. How should I go about a ...

Launching a React project using the terminal - my step-by-step process

I'm attempting to initiate a new react-app utilizing the command npx create-react-app <app name> as shown below: npx create-react-app new-app However, after downloading, it seems to be stuck. It's not progressing at all. I've even rei ...