Dynamic getter/setter in Typescript allows for the creation of functions

Question

Dynamic getter/setter in Typescript allows for the creation of functions

I'm facing a challenge in making Typescript automatically infer types for dynamically created getter and setter functions. In my code, I have a class called MyClass which contains a map of containers:

type Container = {
    get: () => Content
    set: (value: Content) => void
}

type ContainersMap = { [key: string]: Container }

class MyClass {
    containers: ContainersMap

    constructor(names: string[]) {
        this.containers = {} as ContainersMap

        names.forEach(name => {
            Object.defineProperty(this.containers, name, {
                get() { return read(name) },
                set(value) { write(name, value) }
            })
        })

        Object.freeze(this.containers)
    }
}

In another part of my code, I want to utilize it like this:

let someContent: Content = {/* some content */}

let myClass = new MyClass(['first', 'second'])

// I'm encountering a type error here because TypeScript is interpreting it as an attempt to assign Content to Container
myClass.containers['first'] = someContent

I came across a potential solution where I defined

type ContainersMap = { [key: string]: Content }

, but I'm not fully satisfied with this approach as it doesn't accurately represent the intended type of ContainersMap.

Is there a more appropriate way to implement this?

typescript accessor

Answer 1

Answer №1

When working with classes, it's important to separate the public interface from the implementation details.

type Container = {
    get: () => Content
    set: (value: Content) => void
}

This definition specifies an object with properties get and set. You can use

myClass.containers.first.set(someContent)

, but not

myClass.containers.first = someContent

because myClass.containers.first should be of type Container, not Content.

The get and set methods are simply part of how your class implements the desired interface – making myClass.containers.first a readable and writable property of type Content. The contract for this interface is straightforward.

type ContainersMap = { [key: string]: Content }

or when using known keys:

type ContainersMap<K extends string> = { [key in K]: Content } // same as Record<K, Content>

To allow optional properties without initial values, considering making them optional.

A generic class is needed for ContainersMap to recognize specific keys. Without knowledge of your code's read and write methods, leaving them unchanged is advisable. This example illustrates the concept:

class MyClass<K extends string> {
    containers: ContainersMap<K>

    constructor(names: K[]) {
        this.containers = {} as ContainersMap<K>

        names.forEach(name => {
            Object.defineProperty(this.containers, name, {
                get() { return read(name) },
                set(value) { write(name, value) }
            })
        })

        Object.freeze(this.containers)
    }
}

The Container type is no longer necessary.

This setup allows access to defined properties:

let myClass = new MyClass(['first', 'second'])

myClass.containers.first = someContent;

console.log(myClass.containers.first);

However, attempting to access other properties will result in an error:

// Error: Property 'third' does not exist on type 'ContainersMap<"first" | "second">'
myClass.containers.third = someContent;

Typescript Playground Link

Answer 2

When working with classes, it's important to separate the public interface from the implementation details.

type Container = {
    get: () => Content
    set: (value: Content) => void
}

This definition specifies an object with properties get and set. You can use

myClass.containers.first.set(someContent)

, but not

myClass.containers.first = someContent

because myClass.containers.first should be of type Container, not Content.

The get and set methods are simply part of how your class implements the desired interface – making myClass.containers.first a readable and writable property of type Content. The contract for this interface is straightforward.

type ContainersMap = { [key: string]: Content }

or when using known keys:

type ContainersMap<K extends string> = { [key in K]: Content } // same as Record<K, Content>

To allow optional properties without initial values, considering making them optional.

A generic class is needed for ContainersMap to recognize specific keys. Without knowledge of your code's read and write methods, leaving them unchanged is advisable. This example illustrates the concept:

class MyClass<K extends string> {
    containers: ContainersMap<K>

    constructor(names: K[]) {
        this.containers = {} as ContainersMap<K>

        names.forEach(name => {
            Object.defineProperty(this.containers, name, {
                get() { return read(name) },
                set(value) { write(name, value) }
            })
        })

        Object.freeze(this.containers)
    }
}

The Container type is no longer necessary.

This setup allows access to defined properties:

let myClass = new MyClass(['first', 'second'])

myClass.containers.first = someContent;

console.log(myClass.containers.first);

However, attempting to access other properties will result in an error:

// Error: Property 'third' does not exist on type 'ContainersMap<"first" | "second">'
myClass.containers.third = someContent;

Typescript Playground Link

Dynamic getter/setter in Typescript allows for the creation of functions

Answer №1

Similar questions

Can TypeScript support promise chaining in a functional way?

Angular/NestJS user roles and authentication through JWT tokens

Coloring intersected meshes in three.js will recolor every mesh in the scene

Running a TypeScript file on Heroku Scheduler - A step-by-step guide

Issue with TypeScript version 4.2.1 - The Array.some() method does not support a function that returns a boolean

Separate the string by commas, excluding any commas that are within quotation marks - javascript

Transforming Typescript Strings into ##,## Format

Verify enum values within controller function

Stop MatDialog from closing automatically when clicked outside while there are unsaved changes

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

What is a more efficient method for incorporating optional values into an object?

Synchronize Docker volumes

Binding an ID to an <ion-textarea> in Ionic 3

JavaScript heap exhausted while running Docker container

Error in Typescript: The property 'a' is not defined in the type 'A'

The best approach to typing a FunctionComponent in React with typescript

Initial state was not properly set for the reducer in TypeScript

The export 'ChartObject' is not available in highcharts

Understanding how to infer the type of a function when it is passed as an argument

Undefined TypeScript Interface