如何以正确的方式在对象上动态设置属性？

Question

I'm using Typescript . I would like to know how I can dynamically set a property on an object, so that Typescript recognizes the assignment.

For example,

class Foo {
    constructor(obj: object) {
        for (const key in obj) {
            this[key] = obj[key]
        }
    }
}

const bar = new Foo({
    x: 1,
    y: 2,
});

bar.x; // Property 'x' does not exist on type 'Foo'

What I'm trying to do:

class State {
    private state: string;

    constructor (states: string[]) {
        states.forEach((x) => {
            this[x] = () => this.state = x;
        });
    }
}

const x = new State(['open', 'closed']);

x.open(); // Property 'open' does not exist on type 'State'.

Answer 1

Hmm, I don't think TypeScript has a good way for a static class to extend a generic type. What I mean, the following invalid TypeScript is sort of what you're asking for:

// doesn't work
class Foo<T> extends T {
  constructor(obj: T) {
    for (const key in obj) {
      this[key] = obj[key];
    }
  }
}

So you want something like a mixin class , where you extend Foo to be a constructor of both Foo and T ... but not exactly. Here is the best I can do:

Create a class with a different name, _Foo , which adds all the Foo -specific methods and properties. Note that you have to assert this to be of type T in order to assign T 's properties to it:

class _Foo<T> {
  constructor(obj: T) {
    for (const key in obj) {
      // assert this to be compatible with T
      (this as any as T)[key] = obj[key];
    }
  }
  // Foo-specific properties and methods go here
}

Then you can define the type Foo<T> to be both _Foo<T> and T , and assert that Foo is also an object which acts as a constructor for Foo<T> :

type Foo<T> = T & _Foo<T>;
const Foo = _Foo as { new <T>(obj: T): Foo<T> };

And now use it:

const bar = new Foo({
  x: 1,
  y: 2,
});

bar.x; // okay

Does that work for you? It might be worth mentioning that the difficulty involved here might be an indication that what you're trying to do may be better achieved in TypeScript by another design. For instance, maybe Foo<T> should just have a T , instead of be one. Then you can do this in a more straightforward manner. But that's up to you.

Hope it helps; good luck!