The Enchantment of Typescript Properties

Question

The Enchantment of Typescript Properties

Currently exploring Typescript and encountered a dilemma. Can Typescript classes be configured to utilize properties added dynamically at runtime? This is the approach I am currently implementing:

interface IObject {
   [key: string]: any;
}

class A {
    private extends: IObject = {};


    constructor() {
        return new Proxy(this, {
            get: (target: any, name: string) => (name in this.extends) ? this.extends[name] : target[name],
        })
    }

    public extend(key: any, argument: object): A {
       this.extends = Object.assign(this.extends, {
           [key]: argument
       });

       return this;
   }
}

This class acts as an expandable context within my application. I can dynamically add properties using

aInstance.extend('property', {a: 1})

and access them like so aInstance.property. In pure JS, it would result in {a: 1}, however, TypeScript throws an error (Property 'property' does not exist on type 'A'.) during this process. Is there a workaround to address this issue? I am aware of using // @ts-ignore, but I prefer avoiding it as it could complicate code maintenance.

Your insights and suggestions are greatly appreciated. Thank you :)

typescript

Answer 1

Answer №1

It may be challenging to achieve your exact requirement while maintaining type safety. One approach could involve implementing the following:

class A {
    private extends: Record<string, any> = {};

    constructor() {
        return new Proxy(this, {
            get: (target: any, name: string) => (name in this.extends) ? this.extends[name] : target[name],
        })
    }

    public extend<T extends object>(obj: T): A & T {
       this.extends = Object.assign(this.extends, obj);

       // Although necessary, it is safe because of the expected return type A & T through the proxy
       return this as any;
   }
}

let aInstance = new A()
let extended = aInstance.extend({"test": "foo"})

console.log(extended.test)

In essence, the extend method now produces a type that combines A and T. However, one downside is that only the returned value from the extend function will have the additional property typing.

It's worth considering why runtime type extension is needed in this scenario.

If the property names are known beforehand, consider simply adding them directly to the class. Otherwise, utilizing a Map might be a more suitable solution for this task.

Answer 2

It may be challenging to achieve your exact requirement while maintaining type safety. One approach could involve implementing the following:

class A {
    private extends: Record<string, any> = {};

    constructor() {
        return new Proxy(this, {
            get: (target: any, name: string) => (name in this.extends) ? this.extends[name] : target[name],
        })
    }

    public extend<T extends object>(obj: T): A & T {
       this.extends = Object.assign(this.extends, obj);

       // Although necessary, it is safe because of the expected return type A & T through the proxy
       return this as any;
   }
}

let aInstance = new A()
let extended = aInstance.extend({"test": "foo"})

console.log(extended.test)

In essence, the extend method now produces a type that combines A and T. However, one downside is that only the returned value from the extend function will have the additional property typing.

It's worth considering why runtime type extension is needed in this scenario.

If the property names are known beforehand, consider simply adding them directly to the class. Otherwise, utilizing a Map might be a more suitable solution for this task.

Answer 3

Answer №2

// Here is a code snippet with some mocking to facilitate the execution and testing of your code:

type IObject = {};

class Proxy{
    constructor(obj:any, c:{get:(target:any, name:string) => any}) {

    }
}

class A {
    private extends: IObject = {};

    // It is advisable to implement this method outside the constructor
    // Or alternatively, define A as Class A extends Proxy{}
    getProxy() {
        return new Proxy(this, {
            get: (target: any, name: string) => (name in this.extends) ? this.extends[name] : target[name],
        })
    }

    // The intention behind using the Proxy Class is unclear, 
    // However, utilizing Object.defineProperty might resolve any issues
    public extend(key: any, argument: object): A {
        // To access properties like: aInstance.property
        Object.defineProperty(A.prototype, key, {
            get: function () {
                return argument;
            },
            set: function (value) {
                this[key] = value;
            },
            enumerable: true,
            configurable: true
        });

        // Otherwise, the property will be accessible at:
        // aInstance.extends.property
        this.extends = {...this.extends, ...{
            [key]: argument
        }};

        return this;
    }
}

const aInstance: A = new A();


aInstance.extend('property', { a: 1 });

// Using (aInstance as any) to bypass lint checking restrictions
console.log(aInstance, (aInstance as any).property);

// Output will be:
// A { extends: { property: { a: 1 } } } { a: 1 }

edit

console.log(aInstance['property']); // This will also work fine

Answer 4

// Here is a code snippet with some mocking to facilitate the execution and testing of your code:

type IObject = {};

class Proxy{
    constructor(obj:any, c:{get:(target:any, name:string) => any}) {

    }
}

class A {
    private extends: IObject = {};

    // It is advisable to implement this method outside the constructor
    // Or alternatively, define A as Class A extends Proxy{}
    getProxy() {
        return new Proxy(this, {
            get: (target: any, name: string) => (name in this.extends) ? this.extends[name] : target[name],
        })
    }

    // The intention behind using the Proxy Class is unclear, 
    // However, utilizing Object.defineProperty might resolve any issues
    public extend(key: any, argument: object): A {
        // To access properties like: aInstance.property
        Object.defineProperty(A.prototype, key, {
            get: function () {
                return argument;
            },
            set: function (value) {
                this[key] = value;
            },
            enumerable: true,
            configurable: true
        });

        // Otherwise, the property will be accessible at:
        // aInstance.extends.property
        this.extends = {...this.extends, ...{
            [key]: argument
        }};

        return this;
    }
}

const aInstance: A = new A();


aInstance.extend('property', { a: 1 });

// Using (aInstance as any) to bypass lint checking restrictions
console.log(aInstance, (aInstance as any).property);

// Output will be:
// A { extends: { property: { a: 1 } } } { a: 1 }

edit

console.log(aInstance['property']); // This will also work fine

The Enchantment of Typescript Properties

Answer №1

Answer №2

Similar questions

Uncovering the origins of computed object keys in TypeScript

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

XState TypeScript - utilizing the Interprete Service

Dealing With HttpClient and Asynchronous Functionality in Angular

The Http.get() function is running smoothly, yet encountering issues when it comes to functionality within the build (Release/Debug)

Issue with create-react-app and Emotion.js: Uncaught ReferenceError: jsx is undefined

Retrieve an Array Containing a Mix of Objects and Functions in Typescript

Hidden back navigation strategy in AngularJS 2 with location strategy

Instructions on resolving the issue: The type 'string | ChatCompletionContentPart[] | null' cannot be assigned to type 'ReactNode'

Join and Navigate in Angular 2

The issue of assigning a file as a prop in React TypeScript: ("True" type cannot be assigned to "ChangeEventHandler<HTMLInputElement>")

Creating a numeric sequence based on the date of a corresponding transaction - a step-by-step guide

Tips for maintaining type information while setting values in a class membership declaration

Utilizing Regular Expressions as a Key for Object Mapping

What is the role of authguard in securing routes?

"Classes can be successfully imported in a console environment, however, they encounter issues when

Challenges with Loading JSON Dynamically in Next.js using an NPM Package

Angular allows for creating a single build that caters to the unique global style needs of every

Issue with Angular ngFor not updating radio button value when ngModel is set

Dynamic table row that expands to show additional rows sourced from various data sets