Typescript: Class with property by name getter / setter

Question

Suppose, there is an interface:

interface ServiceDataIf {
  somethingToDo(): void;
  mayBeAdd(arg: any): void;
  mayBeGet(name: string): any;
  readonly someVal: string;
  anotherVal: string;
  [name: string]: any;
}

How to implement this interface in a class:

class ServiceDataImpl1 implements ServiceDataIf {
  // easy with properties
  get someVal(): string {
    const result = /* somehow get it */;
    return result;
  }

  constructor() {}

  set anotherVal(v: string): void {
    // remember somewhere v
  }

  // plain methods easy as well
  somethingToDo(): void { /* do something */ }
  mayBeAdd(arg: any): void { /* do another something */ }
  mayBeGet(name: string): any {
    const result = /* somehow get it */;
    return result;
  }

  // How to implement this? [name: string]: any;
}

Methods and properties are ok, is there any way to implement by key accessor with a class? To clarify, can that [name: string]: any accessor be implemented as a class method just like get/set for properties?

So that it can be used like this:

const myImpl = new ServiceDataImpl1();

// read
const val1 = myImpl['something'];
// write
myImpl['something'] = 256;

How about just `const result = this[name];` ? Not sure if I got the question correctly, though. — Daniil Andreyevich Baunov, Nov 17 '18 at 16:31

score 2 · Accepted Answer · answered Nov 17 '18 at 18:34

Finally, as keyword to search, such interface is called indexer. Then enough information is available. For instance, as per following discussions, it seems to be impossible to implement such interface out of the box in Typescript:

Because it causes ambiguity with JavaScript, so that it is prohibited.

However, there is Proxy in ES2015 which allows to implement desired functionality, although not very easy. Following illustrates the way, but not complete implementation.

interface SomeIf {
  [name: string]: any;
}

class SomeImpl implements SomeIf {
  constructor() {
    return new Proxy(this, {
      get: (obj: any, key: string | number | symbol, receiver: any) => {
        console.log('get', key, obj, receiver);
        return key === 'abc' ? 53 : key in obj ? obj[key] : undefined;
      },
      set: (obj: any, key: string | number | symbol, value: any, receiver: any) => {
        console.log('set', key, value, obj, receiver);
        return true;
      }
    });
  }
}

const impl1 = new SomeImpl();
impl1['abc'] = 123;
console.log(`impl1['abc']`, impl1['abc']);

It should be noted that, older browsers won't support Proxy, if desired for use in browsers.

score 0 · Answer 2 · answered Nov 17 '18 at 16:49

If I understand correctly now, you want properties to be dynamically added to the class. And then want to throw compilation error if you try to access something that was not added or is not in the interface.

This line

[name: string]: any;

Basically allows ANY property of ANY kind to exist.

TypeScript can not infer types in the runtime. So, as defined in the interface, it will allow any property to exist. Even if it was not added somewhere.

TypeScript can only make compile time checks.

Ah. And you can't enforce getters/setters in the interface. As described here: Is it possible to use getters/setters in interface definition?

I don't want to enforce any thing. As interface states, it is `[name: string]: any`, I wan't it my class method. Of course, I can enforce property names, as also illustrated with predefined names in getter/setter. But is this not the case, `name` is arbitrary `string`, `any` is arbitrary mapped value. Imagine key value store interface. — muradm, Nov 17 '18 at 16:55

Typescript: Class with property by name getter / setter

2 Answers2