Iterate through the properties of the parent class in TypeScript

I'm currently in the process of developing a validation algorithm for a sophisticated data model using Typescript. To simplify things, I've created a class model that looks like this:

export abstract class Validatable {

    protected errors: string[];

    isValid(): boolean {
        let result = true;
        for each property (which may or may not be an array) in this instance which extends Validatable {
            if (Array(property)) {
                if (!property.every(item=>item.isValid()) {
                    return false;
                }
            } else {
                if (!property.isValid()) {
                    return false;
                }
            }
        }

        return this.errors.length === 0;
    }
}

export class B extends Validatable{
    name: string;
}

export class A extends Validatable{
    name: string;
    Bs: B[];
}

I'm facing difficulties trying to determine how to implement the looping over properties (line 'for each property). I am unsure whether it is even achievable.

The concept behind this approach is to invoke isValid on an object of class A, which will subsequently trigger isValid on all its individual properties instead of duplicating similar code across multiple classes.

Answer №1

To determine if a property is an Array, you can utilize the isArray() function.

For instance:

Calling isArray([1,2,3]) will yield true

Conversely, calling isArray(123) will result in false

Answer №2

properties will contain all the properties within the class that can be utilized for validation logic or other purposes.

class Validatable {

  name: string = "John";
  nums: number[] = [4, 5, 6]

  isValid () :boolean {
    const properties:string[] = Object.getOwnPropertyNames(this);
    console.log(properties);
    return true;  
  }


}

class B extends Validatable {
  greeting = "Hello"
}

let b = new B();

b.isValid();
// logs ["name", "nums", "greeting"]

Playground Link

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 method for obtaining the union type of interface values (including string enums)?

How can I achieve the following ? Given : enum FooEnum1 { Foo = "foo", }; enum FooEnum2 { Foo = 1, }; interface FooInterface { foo1 : FooEnum1, foo2 : FooEnum2, foo3 : string, foo4 : number, }; I am interested in cre ...

Automated tasks running on Firebase Cloud Functions with cron scheduling

There are two cloud functions in use: The first cloud function is used to set or update an existing scheduled job The second one is for canceling an existing scheduled job The management of scheduling jobs is done using import * as schedule from &ap ...

Verify if the specified key is present in the type parameter and if it corresponds to the expected data type in the value parameter

I have a specific goal in mind: export interface GCLPluginConfig { [key: string]: string | number | boolean | Date | string[]; } export interface CorePluginConfig extends GCLPluginConfig { "core.lastUpdateCheck": Date; } export interface An ...

Is the validity of the expression !args.value || args.value.length true?

After analyzing this segment of code, I noticed an interesting expression: !args.value || args.value.length For instance, consider the following scenario: let v = {}; console.log(!v.value); //outputs true console.log(v.value); //outputs undefined con ...

Angular encountering a null value within a pre-existing nested object

Upon receiving a fully populated object from my server to my angular service, everything appears correct in Postman and when I use JSON.stringify in the Angular component. However, I encounter an issue when trying to access nested objects within the view. ...

Utilize Ant Design TreeSelect to seamlessly integrate API data into its title and value parameters

I am currently working on populating a Tree Select component in ANT Design with data fetched from an API. The response from the API follows this structure: projectData = ProjectData[]; export type ProjectData = { key?: number; projectId: number; ...

Is there a way to retrieve the value of a particular attribute while hovering the mouse over it?

When I hover my mouse over the innerHTML content, certain words are highlighted with a title attribute value. How can I retrieve the specific title value of the content I am hovering over? This should be done using the mouseover event in the TypeScript fil ...

Issue with Figma React plugin's PostMessage functionality not behaving as anticipated

I am currently working on developing a plugin for Figma, following the react example provided on their GitHub page: https://github.com/figma/plugin-samples/tree/master/react One of the functionalities I have implemented is a button that triggers a specifi ...

Send a collection of objects by submitting a form

I have a component with the following html code. I am attempting to dynamically generate a form based on the number of selected elements, which can range from 0 to N. <form #form="ngForm" id="formGroupExampleInput"> <div class="col-xs-5 col-md- ...

Form validation is an essential feature of the Angular2 template-driven sub form component

I'm currently working on a template-driven form that includes a group of inputs generated through an ngFor. My goal is to separate this repeating 'sub-group' into its own child component. However, I'm encountering difficulties in ensur ...

Troubleshooting Angular 2 Component: Why is console.log not functioning in Typescript?

I'm fairly new to both Angular2 and typescript. Given that typescript is a superset of javascript, I assumed that functions like console.log would function as expected. Interestingly, console.log works perfectly in .ts files when placed outside a comp ...

Using React and TypeScript, open the initial tab from a mapped array with an accordion component

{accordion.map(accordionItem => ( <AccordionItem key={accordionItem.title} text={accordionItem.text} title={accordionItem.title} ></AccordionItem> ...

Verify the occurrence of an element within an array inside of another array

Here is the scenario: const arr1 = [{id: 1},{id: 2}] const arr2 = [{id: 1},{id: 4},{id: 3}] I need to determine if elements in arr2 are present in arr1 or vice versa. This comparison needs to be done for each element in the array. The expected output sho ...

How can I access a file uploaded using dxFileUploader?

I am facing an issue with retrieving a file from dxFileUploader (DevExpress) and not being able to read it in the code behind. The file is only appearing as an object. Here is My FileUploader : { location: "before", ...

Is it possible to choose several classes with identical names and then trigger a shared function simultaneously?

Is there a way to make this function target all elements with the class ".stop" and stop the video when any of these elements are clicked? window.addEventListener("load", function(event) { window.addEventListener('scroll', checkScroll, false) ...

Passing an event from onSubmit in React without using lambdas

Within our current project, the tslint rule jsx-no-lambda is in place. When attempting to capture event from onSubmit, this is how I typically write my code: public handleLogin = (event: React.FormEvent<HTMLFormElement>) => { event.preventDe ...

Discover a Simple Trick to Enhance tsc Output: Unveil the Art of

When I work on a TypeScript project, I typically use the watch mode of the compiler: tsc --watch However, one issue I face is that it's challenging to identify errors in the output since they are displayed as plain text: Sometimes I don't even ...

React Conditional State Setting

I have created a component that dynamically changes its background color based on the rating of a school. According to the specifications, if the school's rating falls between 1 and 3, the background color should be orange. For ratings between 4 and ...

How can you resolve the error message "No overload matches this call." while implementing passport.serializeUser()?

Currently, I am working on implementing passport.serializeUser using TypeScript. passport.serializeUser((user: User, done) => { done(null, user.id) }); The issue I am encountering is as follows: No overload matches this call. Overload 1 of 2, &ap ...

Exploring Nuxt's Getters with vuex-class for seamless data retrieval

Currently, I am in the process of developing an application using Nuxt and experimenting with vuex for the first time. Despite following numerous tutorials to set it up, I'm encountering difficulties accessing the store and suspect that the issues may ...