Tips on how to access the names of all properties within a TypeScript class while excluding any methods

Looking to enhance the reactivity of my code, I want to render my view based on the properties of a class. How can I extract only the property names from a class and exclude methods?

For instance:

export class Customer { 
    customerNumber: string; 
    name: string; 
    salesContact: string; 
    salesContactEmailAddress: string; 
    salesContactNumber: string; 
    execContact: string; 
    constructor(data?: any) {
        ...
    }

    toJSON() {
        ...
    }

    clone() {
        ...
    }
}

I'm aiming for the result to be an Array of strings like this:

fields: string[] = ["customerNumber", "name", "salesContact", "salesContactEmailAddress", "salesContactNumber", "execContact"];

Answer №1

If you're wondering about storing type information for a class in JavaScript, the general consensus is that it's not possible due to the language's limitations.

As Thomas Devries pointed out, real reflection isn't achievable in TypeScript either.

However, when dealing with instances of a class where properties have been initialized, there are ways to access property names using Object.keys().

For instance:

class A {
  prop: string = "hello"; 

  constructor() {
    // Initializing properties
    // this.prop = "hello";
  }

  fn() {
    // Function logic
  }
}
const a = new A();
console.log(Object.keys(a)); // ["prop"]

In certain cases, Object.getOwnPropertyNames may be more suitable than Object.keys().

To delve deeper into enumerability and ownership of properties, check out this resource here.

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

What is the best way to accept user input in typescript?

Currently, I am working on a TypeScript project that involves taking user input for the addition of two numbers. Below is the code snippet I am using: function rotatedString(S1,S2){ return S1+S2; } function processData() { //INPUT[uncomment & m ...

Encountering compilation errors with TypeScript files in Angular 2 while using Visual Studio 2017

Currently, I am in the process of developing an Angular 2 application Here is a snippet of the TypeScript code that I have written: import { Component } from 'angular2/core'; @Component({ selector: 'my-app', template: ' &l ...

What is the best way to refresh my component following a delete operation in React?

I am currently facing an issue with using Sweetalert2 and React (tsx) where I am unsure how to refresh my item list after deleting methods. Below is the code snippet that I have for a button that implements these functions: function DeleteCard(item: DataI ...

Using TypeScript to deserialize various types from a shared object

I am currently dealing with a JSON array containing serialized objects, each of which has a type field. My challenge lies in deserializing them properly due to TypeScript not cooperating as expected: Check out the TypeScript playground for reference. type ...

Why does the request body show as null even after passing body data in Prisma?

My application uses Prisma for database storage with MySQL. It is built using Next.js and TypeScript. I have set up the API and it is functioning properly. However, when I try to save data sent through the API, the `request.body` is null. Interestingly, wh ...

Coverage of code in Angular2 using Qunit

Is there a reliable code coverage measurement tool or framework that can easily be integrated to assess the code coverage of Angular2-TypeScript code with QUnit tests? I have come across some frameworks like remap-istanbul, blanket.js etc., but these fram ...

In the function ngOnChange, the SimpleChange currentValue is supposed to be defined, but for some reason, the

Within the TypeScript code, a name variable is assigned input from another component. @Input() name : any ; In the ngOnChange function, I retrieve and print the SimpleChange object in the following manner. ngOnChanges(changes: SimpleChange){ console.l ...

What is the best way to transfer an object from the view to the controller in AngularJS and ASP.net MVC

How to pass an object with a specific amount of data from the View to the Controller using ASP.net MVC and AngularJS VIEW var Person = {}; Person.IdPerson = 69425; Person.Year = new Date().getFullYear(); $http.post('/API/Update_Person', { para ...

The property functions normally outside the promise, but is undefined when within the promise context

I am currently working on filtering an array based on another array of different objects but with the same key field. Although I have made some progress, I keep encountering errors that I am unable to resolve. @Component({ selector: 'equipment&ap ...

Configuring Typescript target and library to utilize Promise.allSettled on outdated web browsers

I am currently using TypeScript version 4.3.5 and Node.js version 14.18.1 in my project. The code I am working on is compiled to target both old and new browsers by setting target=es5 in the tsconfig file. I make use of both Promise.all and Promise.allSett ...

Creating a sophisticated union type by deriving it from another intricate union type

I have a unique data structure that includes different types and subtypes: type TypeOne = { type: 'type-one', uniqueKey1111: 1, }; type TypeTwo = { type: 'type-two', uniqueKey2222: 2, } type FirstType = { type: 'first&apo ...

.bail() function does not function properly when used in conjunction with express-validator

While registering a new user, I require their name, email, and password. If no name is provided, there is no need for the backend to validate the email. I believe that the use of .bail() in express-validator should handle this situation, but unfortunately ...

What is the method to access the information within the observer?

When I receive the data from the observer in the console, here is what I see: https://i.stack.imgur.com/dVzwu.png However, I am only interested in extracting this specific data from each item on the list: https://i.stack.imgur.com/g8oHL.png To extract ...

Utilize React Hook Form to easily reset the value of an MUI Select component

I created a dropdown menu where users can select from "Item 1", "Item 2", and "Item 3". Additionally, there is a "Reset" button that allows users to clear their selection and make a new one. Below is the code I used: import React from ...

What is the process for converting this lambda type from Flow to TypeScript?

Currently, I am in the process of converting the below code snippet from Flow to TypeScript let headAndLines = headerAndRemainingLines(lines, spaceCountToTab), header: string[] = headAndLines.header, groups: string[][]= headAndLines.groups, ...

Discovering the proper method for indicating the type of a variable in the middle of a statement

In my code, there was a line that looked like this: let initialPayload = this.db.list("/members").snapshotChanges() as Observable<any[]> But then I changed it to this: let initialPayload = this.db.list("/members").snapshotChanges ...

Obtaining the Froala text editor's instance in React: A step-by-step guide

Is there a way to access the Froala editor instance within my React components? I've noticed that the official Froala documentation doesn't provide instructions for achieving this in React, only in jQuery. ...

Should FormBuilder be utilized in the constructor or is it considered a poor practice?

section, you can find an example of implementation where declarations for formBuilder and services are done within the constructor(). While it is commonly known that using services inside the constructor() is not a recommended practice and should be done ...

What is the reason behind the absence of compile time errors when using 'string' functions on an 'any' field type variable in TypeScript?

Looking at the following typescript code snippet: let a; a = "number"; let t = a.endsWith('r'); console.log(t); It is worth noting that since variable 'a' is not declared with a specific type, the compiler infers it as ...

A pronounced distinction exists between ionInput and ionChange functionality

Q. Can you explain the difference between (ionInput) and (ionChange) events in Ionic framework? When would it be more appropriate to use one over the other? I have experimented with both event handlers below and found that they produce the same expected r ...