Inheriting static attributes in Typescript without using the static keyword

Question

Inheriting static attributes in Typescript without using the static keyword

My project involves utilizing multiple classes that represent entities from a database.

abstract class Entity {
    static columns: Column[];
    static showInNav: boolean;
    static dependencies: string[];
    // non-static fields
}
class Entity_A extends Entity {
    //static properties redeclaration
    //non-static properties
}
class Entity_B extends Entity {
    //static properties redeclaration
    //non-static properties
}

Each class extends the Entity class or one of its children. During the initialization phase, I store these classes in an array [Entity_A, Entity_B, ...], iterate over them, and retrieve their properties to properly configure the application. These static properties serve as the configuration settings.

The challenge arises because TypeScript lacks a static contract, making it prone to mistakes and difficult to debug (which is not considered best practice). One potential solution could be to convert static properties to methods and access them using new currentClass().property. However, I believe there must be a more efficient approach.

Any suggestions?

Edit (desired outcome): I aim to securely define "configuration" within classes (including typechecking and mandatory overrides) while easily accessing this information when provided with an array of classes.

angular typescript oop static-methods

Answer 1

Answer №1

To maintain the integrity of your code and ensure that required static fields are specified, consider hiding the actual Entity class within a module and only exposing a function that constructs a derived class with overridden static fields. By encapsulating this logic in a function, you can enforce the implementation of essential properties for each entity:

entity.ts

abstract class EntityImpl {
    static columns: Column[];
    static showInNav: boolean;
    static dependencies: string[];
    abstract doStuff(): void;
}
export interface Column {
    // Placeholder for demonstration purposes
}

export function Entity(required: { columns: Column[]; showInNav: boolean; dependencies: string[];}) {
    abstract class Entity extends EntityImpl {
        static columns: Column[] = required.columns
        static showInNav: boolean = required.showInNav;
        static dependencies: string[] = required.dependencies;
    }
    return Entity;
}
// Export type definitions for flexible usage 
export type Entity = EntityImpl;
export type EntityClass = typeof EntityImpl;

impl.ts

import { Entity, EntityClass } from './entity'

class Entity_A extends Entity({
    columns: [],
    dependencies: [],
    showInNav: true
}) {
    doStuff(): void {} // Abstract methods must be implemented 
}

class Entity_B extends Entity({
    columns: [],
    dependencies: [],
    showInNav: false
}) {
    doStuff(): void {}
}

// Accessing static properties for all classes
var allClasses : Array<EntityClass> = [Entity_A, Entity_B];
for(let type of allClasses) {
    console.log(type.showInNav);
}

// Accessing instances with ensured method implementation
var data: Array<Entity> = [new Entity_A(), new Entity_B()];
data.forEach(x => x.doStuff());

This approach enforces the specification of static fields and ensures the implementation of abstract methods. For base classes deriving from Entity, the same pattern can be applied by encapsulating the class creation logic within a function.

Answer 2

To maintain the integrity of your code and ensure that required static fields are specified, consider hiding the actual Entity class within a module and only exposing a function that constructs a derived class with overridden static fields. By encapsulating this logic in a function, you can enforce the implementation of essential properties for each entity:

entity.ts

abstract class EntityImpl {
    static columns: Column[];
    static showInNav: boolean;
    static dependencies: string[];
    abstract doStuff(): void;
}
export interface Column {
    // Placeholder for demonstration purposes
}

export function Entity(required: { columns: Column[]; showInNav: boolean; dependencies: string[];}) {
    abstract class Entity extends EntityImpl {
        static columns: Column[] = required.columns
        static showInNav: boolean = required.showInNav;
        static dependencies: string[] = required.dependencies;
    }
    return Entity;
}
// Export type definitions for flexible usage 
export type Entity = EntityImpl;
export type EntityClass = typeof EntityImpl;

impl.ts

import { Entity, EntityClass } from './entity'

class Entity_A extends Entity({
    columns: [],
    dependencies: [],
    showInNav: true
}) {
    doStuff(): void {} // Abstract methods must be implemented 
}

class Entity_B extends Entity({
    columns: [],
    dependencies: [],
    showInNav: false
}) {
    doStuff(): void {}
}

// Accessing static properties for all classes
var allClasses : Array<EntityClass> = [Entity_A, Entity_B];
for(let type of allClasses) {
    console.log(type.showInNav);
}

// Accessing instances with ensured method implementation
var data: Array<Entity> = [new Entity_A(), new Entity_B()];
data.forEach(x => x.doStuff());

This approach enforces the specification of static fields and ensures the implementation of abstract methods. For base classes deriving from Entity, the same pattern can be applied by encapsulating the class creation logic within a function.

Inheriting static attributes in Typescript without using the static keyword

Answer №1

Similar questions

TypeScript's type casting will fail if one mandatory interface property is missing while an additional property is present

Using parameters in routes in Angular 4

All-encompassing NextJS App router with a focus on Internationalization

Tips for effectively passing navigation as props in React Navigation with Expo

A step-by-step guide on customizing the background color of a Dialog in Angular Material (Version 16)

Does this Spread Operator Usage Check Out?

Discover the process of retrieving all workday dates using Angular

"Encountering a 400 bad request error when making a Graphql POST

How is it possible that there is no type error when utilizing copy with spread syntax?

Mastering Props Typing in React Using TypeScript

I am trying to replace the buttons with a dropdown menu for changing graphs, but unfortunately my function does not seem to work with the <select> element. It works perfectly fine with buttons though

Upgrading from Angular 5.2 to 6.0: Facing an issue where angular.json does not replace angular-cli.json

Mastering the Conversion from NGRX Effect to NGRX Effect v15

incorporating a personalized HTMLElement using Typescript

Declaring a function type with a void parameter type in typescript

Type definition for Vuex store functionality

What is the best way to insert CSS code into a custom Vue directive file?

What is the best way to simulate an overloaded method in jest?

Develop an asynchronous thunk with TypeScript in Redux Toolkit, utilizing the features of rejectWithValue and Payload types for handling errors

What is the best way to implement an Angular application within the child routes of another Angular application?