How can one view all the static variables and methods associated with a class in Typescript or ES6?

Is it possible to retrieve all static variable names and static method names associated with a class, similar to how the Object.keys method returns a list of key names attached to an object?

Typescript Example:

class FindStatics {
  static num1:string = 'Num 1';
  static num2:string = 'Num 2';
  notStatic:string = "I'm not static";
  static concat ():string {
    return `${FindStatics.num1} loves ${FindStatics.num2}`
  }
  addToNonStatic(str:string):string {
    return `${this.notStatic} + ${str}`;
  }
}

In the above example, what I am looking for is a way to extract only the names of the static variables and methods - in this case, num1, num2, and concat.

Answer №1

It's interesting how easily you can retrieve a list of all the static variable and method names associated with a class by using the Object.keys method. ES6 classes are essentially just a more concise way of writing the previous ES5 syntax. The inheritance of static properties is consistent within classes, including when subclassing, resulting in a direct prototype connection between the subclass constructor function and the superclass constructor.

To fetch all static variable and method names in this particular scenario:

Object.keys(GetStatics);

Answer №2

@Kirkify, Object.keys does not list method names in my browser because they are not enumerable.

https://i.sstatic.net/qr1qe.png

If you encounter this issue, consider using getOwnPropertyNames.

Object.getOwnPropertyNames(FindStatics) === [
  "length", "prototype", "concat", "name", "num1", "num2"
]

const lengthPrototypeAndName = Object.getOwnPropertyNames(class {})
Object.getOwnPropertyNames(FindStatics).filter(
  k => !lengthPrototypeAndName.includes(k)
) === ["concat", "num1", "num2"]

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

Combine strings in PHP with an alert box in JavaScript

Is there a way to concatenate a string in a JavaScript alert box? I want the first part of the alert box to be a simple text, while the second part is a string retrieved from a MySQL table. $myname = $row["name"]; echo ' <scri ...

Successfully changing the source and tracking of a video through an onclick button, but the video content remains unchanged

I apologize if this post is a duplicate, but I couldn't find the answer in previous threads. I'm attempting to change the video source using an onclick button. However, even after changing the source, the video remains the same. <video width ...

API endpoint generating a Vue component as a rendered output

In the process of developing a document templater service, I am faced with the challenge of handling numerous document templates (contracts, protocols, etc.) written in Vue. The concept revolves around clients sending props in the body, which are then pass ...

Converting a timestamp to a date format within AngularJS interpolation

Is there a way to send a timestamp, such as 1519357500, to HTML and then convert it into a date format while using interpolation? I attempted the following approach but unfortunately it did not work: {{moment($ctrl.myTimestamp).format('MMMM Do YYYY, ...

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

Utilizing a switch to deactivate all currently active classes on individual div elements

I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back ...

Transform a text node into an HTML element with the help of JQuery

Consider this HTML snippet: <div> Lorem ipsum <span>dolor sit</span> amet <span>consectetur adipiscing elit</span> eiusmod tempor </div> To select the text nodes [Lorem ipsum, amet, eiusmod tempor], ...

Guide to generating interactive material-ui components within a react application?

I am facing a challenge in creating a dynamic mui grid element triggered by a button click in a React component. When attempting to create let newGrid = document.createElement('Grid'), it does not behave the same way as a regular div creation. D ...

Using select tags in conjunction with JavaScript can add dynamic functionality to your website

I've been working on adding dropdown menus to my website and have been using code similar to this: <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</opti ...

Reveal the administrator's details exclusively when the associated radio button is chosen

Managing administrators for a post can be done through an editing page with corresponding radio buttons. Each radio button is linked to a different administrator, and selecting one populates the form fields with that admin's details. The issue arises ...

Formatting dates for the bootstrap datepicker

Hi there! I am currently using a bootstrap datepicker and I am attempting to retrieve the value from the datepicker text box in the format of date-month-year for my controller. However, at the moment, I am only able to obtain values in the format Tue Oct 0 ...

Limiting the DatePicker in React JS to only display the current year: Tips and Tricks!

I'm currently implementing the KeyboardDatePicker component in my React application to allow users to choose a travel date. However, I am looking to restrict the date selection to only the current year. This means that users should not be able to pick ...

The webpage freezes when attempting to run jQuery with Selenium

I'm currently facing an issue where my selenium script hangs the webpage whenever I try to find an element using jQuery. The script doesn't execute and a pop up appears in the browser with the message "A script on this page may be busy, or it may ...

Invoke a function that generates an array within a v-for loop and iterate through the elements in a Vue.js component

Seeking guidance on the optimal approach for this task. I need to invoke a method within a v-for loop that lazily loads data from a related model. Can anyone advise on the best practice for achieving this? <div v-for="speaker in allSpeaker" :k ...

Disappearing act: Ionic tabs mysteriously disappear when the back button

Whenever I navigate in my ionic app, I notice that the tabs-bar disappears when I go to different pages and then return to the tabs. See Demo Code tab1 Here is a sample link to navigate to other pages: <ion-label routerDirection="forward" [routerLi ...

exploring XML documents

With around 250,000 XML files, each named with a UUID, I am looking for the most effective way to perform a full text search on these files and identify the UUID of the matching ones. What would be the optimal approach for indexing them in a nodejs environ ...

The empty string is not getting recognized as part of an array

Currently, I have a textarea field where pressing enter submits and creates a new item in the array. Pressing shift + enter creates a new line in the textarea input field. But when trying to submit by pressing shift and enter after creating a new line, it ...

Define the input field as a specific type and disable the Material-UI text formatting

I am using a Texfield component from Material UI, but I have noticed that every time I type, the input stops and doesn't continue to the next letter. I have to click on it again in order to continue typing. When I remove the onChange method, the data ...

Utilize Angular2 data binding to assign dynamic IDs

Here is the JavaScript code fragment: this.items = [ {name: 'Amsterdam1', id: '1'}, {name: 'Amsterdam2', id: '2'}, {name: 'Amsterdam3', id: '3'} ]; T ...

Increase the spacing between the column label and the x-axis label in a c3 chart

Take a look at the chart below, I'm attempting to create some additional spacing between the column labels and the x-axis label. https://i.sstatic.net/R7zqN.png I experimented with adding this CSS style: text.c3-axis-x-label { margin-top: 10 ...