Exploring the hierarchy of inheritance using TypeScript classes

Question

Exploring the hierarchy of inheritance using TypeScript classes

In our development environment, we have a unique "framework" that creates ES5 "classes" in a specific way:

var MyClass = ourClass({
  extends: Base,
  constructor: function MyClass(...){...}
  static: {},
  ...
})

// later somewhere
var myClassInstance = new MyClass(...);

This process involves enhancing the returned constructor with static properties and the inheritance chain of the constructor functions.

For example, in a hierarchy like Base -> Specialized -> EvenMoreSpecialized,

EvenMoreSpecialized.staticChain === [EvenMoreSpecialized, Specialized, Base, Object]

. If we have an instance theInstance of EvenMoreSpecialized, calling theInstance.static('aField') retrieves the first 'aField' property defined in the inherited constructor functions.

I am exploring options to migrate to TS/ES6 classes without compromising the existing functionality of the static() feature. The challenge lies in integrating this feature smoothly into TypeScript while preserving its current capabilities.

The proposed signature for the static() function would be:

static(identifier:string):any

Is there a way to catch misspelled identifiers at compile time? Is it possible to narrow down the return type from any for better type safety?

Here's a more detailed example:

var Base = ourClass({
  extends: Object,
  constructor: function Base(){},
  static: {
    secret: null
  }
})

var Specialized = ourClass({
  extends: Base, 
  constructor: function Specialized() {};
  static: {
    secret: '12345'
});
var EvenMoreSpecialized = ourClass({
  extends: EvenMoreSpecialized,
  static: {
    secret: '23456'
  }
});

var base = new Base();
// base.constructor.staticChain === [Base, Object];
base.static('secret'); // => null; Base.secret

var specialized = new Specialized();
// specialized.constructor.staticChain === [Specialized, Base, Object]
specialized.static('secret'); // => '12345'; Specialized.secret

var even = new EvenMoreSpecialized();
// even.constructor.staticChain === [EvenMoreSpecialized, Specialized, Base, Object]
even.static('secret'); // => '23456'; EvenMoreSpecialized.secret

javascript typescript ecmascript-6 ecmascript-5

Answer 1

Answer №1

Creating a static method lookup that explores the prototype and constructor chain to construct a cache for each prototype of static methods found in the constructors can be an interesting task. This solution, compatible with strict TypeScript settings and runnable on Node.js, aims to achieve just that.

An alternative approach could involve implementing the initialization of the static cache as a decorator. However, due to the ongoing development of EcmaScript specifications related to decorators, the TypeScript decorator API remains dynamic and may undergo changes. Once these specifications are finalized, using decorators might offer a more elegant solution.

(Although type safety may be compromised, this method should suffice for handling legacy code)

class Base {
    staticMethod(m:string):(...any:any[])=>any {
        // Check if the static cache already exists; if not, create it.
        if (!("_staticCache" in this)) {
            let statics = Object.create(null);
    
            let collect = (x:any) => {
                let proto = Object.getPrototypeOf(x.prototype);
                
                if (proto)
                    collect(proto.constructor);
                
                for (let prop in x) {
                    statics[prop] = x[prop];
                }
            }
            
            collect(this.constructor);
            
            Object.defineProperty(
                Object.getPrototypeOf(this),
                "_staticCache",
                {enumerable:false,value:statics}
            );
        }

        return (this as any)._staticCache[m];
    }
}

class Foo extends Base {
    static fooOnly(x:string) {
        console.log("fooOnly in foo with arg " + x);
    }

    static fooBar() {
        console.log("fooBar in foo");
    }
}

class Bar extends Foo {
    static fooBar() {
        console.log("fooBar in bar");
    }

    static barOnly() {
        console.log("barOnly in bar");
    }
}

let test = new Bar();

test.staticMethod("fooOnly")("Hello");  // Calls method in foo
test.staticMethod("fooBar")();          // Calls method in bar
test.staticMethod("barOnly")();         // Calls method in bar

Answer 2

Creating a static method lookup that explores the prototype and constructor chain to construct a cache for each prototype of static methods found in the constructors can be an interesting task. This solution, compatible with strict TypeScript settings and runnable on Node.js, aims to achieve just that.

An alternative approach could involve implementing the initialization of the static cache as a decorator. However, due to the ongoing development of EcmaScript specifications related to decorators, the TypeScript decorator API remains dynamic and may undergo changes. Once these specifications are finalized, using decorators might offer a more elegant solution.

(Although type safety may be compromised, this method should suffice for handling legacy code)

class Base {
    staticMethod(m:string):(...any:any[])=>any {
        // Check if the static cache already exists; if not, create it.
        if (!("_staticCache" in this)) {
            let statics = Object.create(null);
    
            let collect = (x:any) => {
                let proto = Object.getPrototypeOf(x.prototype);
                
                if (proto)
                    collect(proto.constructor);
                
                for (let prop in x) {
                    statics[prop] = x[prop];
                }
            }
            
            collect(this.constructor);
            
            Object.defineProperty(
                Object.getPrototypeOf(this),
                "_staticCache",
                {enumerable:false,value:statics}
            );
        }

        return (this as any)._staticCache[m];
    }
}

class Foo extends Base {
    static fooOnly(x:string) {
        console.log("fooOnly in foo with arg " + x);
    }

    static fooBar() {
        console.log("fooBar in foo");
    }
}

class Bar extends Foo {
    static fooBar() {
        console.log("fooBar in bar");
    }

    static barOnly() {
        console.log("barOnly in bar");
    }
}

let test = new Bar();

test.staticMethod("fooOnly")("Hello");  // Calls method in foo
test.staticMethod("fooBar")();          // Calls method in bar
test.staticMethod("barOnly")();         // Calls method in bar

Answer 3

Answer №2

It seems like your goal is to set a fixed value and have the class hierarchy return the nearest value, resembling traditional class inheritance behavior.

You didn't specify any need for changing values, so there are a couple of methods to consider: one involving prototypes and the other through assignment. Both achieve the same result in terms of inheritance.

The code snippets here utilize the keyof keyword, which was introduced in TypeScript 2.1.

class Base {
    value: number;
    name : string;
    readonly otherValue: number = 123;
    
    static<K extends keyof this>(key: K): this[K] {
        return this[key];
    }
}

Base.prototype.value = 123;

class InheritFromBase extends Base {
    readonly otherValue: number = 456;
    anotherValue: number;
}

InheritFromBase.prototype.value = 345;

class WorkingExample extends InheritFromBase {}

let base = new Base();

base.static('value') == 'bob';

base.static('name') === 'bob';

base.static('anotherValue');

let ex = new WorkingExample();

ex.static('anotherValue');

base.value = 255;

let result = Base.prototype.value === base.value;

If you know the possible static keys beforehand and are willing to duplicate inherited values, you can use a separate object approach as well.

interface IStaticOptions {
    optionA?: string;
    optionB?: number;
    optionC?: string;
}

class ThirdBase {
    value: number;
    anotherValue: number;
    staticOptions: IStaticOptions;
    
    static<K extends keyof IStaticOptions>(key: K): IStaticOptions[K] {
        return this.staticOptions[key];
    }

    staticTwo<K extends keyof this>(key: K): this[K] {
        return this[key];
    }
}

This assumes that you are able to replace your current class structure with this new method entirely. If not, then this solution may not be suitable.

Personally, I find the prototype/assignment method from the first example to be preferable.

Answer 4

It seems like your goal is to set a fixed value and have the class hierarchy return the nearest value, resembling traditional class inheritance behavior.

You didn't specify any need for changing values, so there are a couple of methods to consider: one involving prototypes and the other through assignment. Both achieve the same result in terms of inheritance.

The code snippets here utilize the keyof keyword, which was introduced in TypeScript 2.1.

class Base {
    value: number;
    name : string;
    readonly otherValue: number = 123;
    
    static<K extends keyof this>(key: K): this[K] {
        return this[key];
    }
}

Base.prototype.value = 123;

class InheritFromBase extends Base {
    readonly otherValue: number = 456;
    anotherValue: number;
}

InheritFromBase.prototype.value = 345;

class WorkingExample extends InheritFromBase {}

let base = new Base();

base.static('value') == 'bob';

base.static('name') === 'bob';

base.static('anotherValue');

let ex = new WorkingExample();

ex.static('anotherValue');

base.value = 255;

let result = Base.prototype.value === base.value;

If you know the possible static keys beforehand and are willing to duplicate inherited values, you can use a separate object approach as well.

interface IStaticOptions {
    optionA?: string;
    optionB?: number;
    optionC?: string;
}

class ThirdBase {
    value: number;
    anotherValue: number;
    staticOptions: IStaticOptions;
    
    static<K extends keyof IStaticOptions>(key: K): IStaticOptions[K] {
        return this.staticOptions[key];
    }

    staticTwo<K extends keyof this>(key: K): this[K] {
        return this[key];
    }
}

This assumes that you are able to replace your current class structure with this new method entirely. If not, then this solution may not be suitable.

Personally, I find the prototype/assignment method from the first example to be preferable.

Exploring the hierarchy of inheritance using TypeScript classes

Here's a more detailed example:

Answer №1

Answer №2

Similar questions

Exploring the synergies between Angular Dragula and utilizing the $index property

Angular: Consistently losing focus on TextArea whenever its model is updated

What is the reason for function components running in multiples of 2 when the state changes?

Inquiry regarding the implementation of DTO within a service layer parameter

Adjusting the dimensions of a control in real-time

Issue a response with an error message when making an $http request

Utilizing RavenDB with NodeJS to fetch associated documents and generate a nested outcome within a query

What is the appropriate typescript type for an array payload when using the fetch API?

Using Rails 4 and Ruby 2, I will be implementing JavaScript to successfully attach a PDF document to an

Dealing with Exceptions in NestJS and TypeORM: Troubleshooting "Get Status is not a function"

Strange Dojo Error Reporting Issue - 'function is undefined' error incorrectly reported by dojoBuild

There seems to be an issue with the cookie functionality as it is not

Nuxt.JS is not rendering blocks in the way that I require

How can I incorporate the LIKE operator in a query when dealing with PostgreSQL's String array type using TypeORM?

Update the parent element's class style within a targeted div media query

Using HTML and Javascript, create a set of buttons that can dynamically change the CSS styles of specific

iOS now supports fully transparent tooltips and modals, offering a sleek and

The NextJs error states that a string cannot be assigned to type Never

Exploring how JavaScript variables behave when used inside a nested forEach loop with an undefined

serving index.html using express and react