Using Typescript to create an index signature for easily accessing child objects through a proxy

Question

Using Typescript to create an index signature for easily accessing child objects through a proxy

As I am just starting to learn Typescript, please excuse me if this question is not well-formed.

I have an object (Object A) that encapsulates another object (Object B) and includes some methods to manipulate Object B. My goal is to proxy the access on Object A so when accessing a key, the corresponding value from Object B will be returned. To illustrate, consider the following code snippet:


type AType = {
  state: StateType
  doubleSomeVal(): number;
} & StateType

type StateType = {
   someVal: number;
}


type StateTypeKey = "someVal"

class A implements AType {
    state: StateType;

    doubleSomeVal() {
      return this.state.someVal * 2;
    }

    constructor(state: StateType) {
      this.state = state;
    }

    static create(state: StateType) {
      return new Proxy(new A(state), { 
        get(target: A, key: StateTypeKey) {
          return target.state[key] || target[key];
        }
     });
    }
}

However, TypeScript raises an error because it does not recognize that my class A possesses the properties of StateType - which is understandable, but I would like to address this issue if possible.

typescript

Answer 1

Answer №1

I believe that you may not want A to implement AType, as it is only the outcome of A.create() that accomplishes that. Therefore, I would suggest modifying your A class in the following way:

class A {
  state: StateType;

  doubleSomeVal() {
    return this.state.someVal * 2;
  }

  constructor(state: StateType) {
    this.state = state;
  }

  static create(state: StateType) {
    return new Proxy(new A(state) as A & A["state"], {
      get(target, key) {
        return Reflect.has(target.state, key)
          ? Reflect.get(target.state, key)
          : Reflect.get(target, key);
      }
    });
  }
}

It's important to note that the target of the Proxy is asserted to be A & A["state"], which is essentially equivalent to AType. This assertion is required somewhere since the compiler cannot easily confirm that the proxy will behave as that intersection. The implementation of the get handler was also adjusted to enhance compatibility with the compiler and handle potential falsy values for target.state[key]. But the core idea remains the same.

Subsequently, you can utilize it like this:

const a = A.create({ someVal: 4 });
console.log(a.state); // {someVal: 4}
console.log(a.someVal); // 4
console.log(a.doubleSomeVal()); // 8

The code compiles successfully and produces the desired results. Best of luck!

Link to code

Answer 2

I believe that you may not want A to implement AType, as it is only the outcome of A.create() that accomplishes that. Therefore, I would suggest modifying your A class in the following way:

class A {
  state: StateType;

  doubleSomeVal() {
    return this.state.someVal * 2;
  }

  constructor(state: StateType) {
    this.state = state;
  }

  static create(state: StateType) {
    return new Proxy(new A(state) as A & A["state"], {
      get(target, key) {
        return Reflect.has(target.state, key)
          ? Reflect.get(target.state, key)
          : Reflect.get(target, key);
      }
    });
  }
}

It's important to note that the target of the Proxy is asserted to be A & A["state"], which is essentially equivalent to AType. This assertion is required somewhere since the compiler cannot easily confirm that the proxy will behave as that intersection. The implementation of the get handler was also adjusted to enhance compatibility with the compiler and handle potential falsy values for target.state[key]. But the core idea remains the same.

Subsequently, you can utilize it like this:

const a = A.create({ someVal: 4 });
console.log(a.state); // {someVal: 4}
console.log(a.someVal); // 4
console.log(a.doubleSomeVal()); // 8

The code compiles successfully and produces the desired results. Best of luck!

Link to code

Using Typescript to create an index signature for easily accessing child objects through a proxy

Answer №1

Similar questions

Converting the following ngRx selector to a boolean return – a guide

Error message in Angular 2: "__generator is not recognized"

Dealing with React and Firebase Authentication Errors: How to Handle Errors for Existing Accounts with Different Credentials

TS2339: The specified property is not present on the Angular type

React 16 exhibiting unexpected behavior with class names

Angular 2 does not automatically re-evaluate *ngIf on model change

The @Input directive is not compatible with the OnPush change detection strategy

Is it possible to convert several XLIFF files of different languages into JSON files using Angular?

What is the best way to map elements when passing props as well?

Struggling to bring in components in ReactJS

Angular encountered an ERROR of type TypeError where it cannot access properties that are undefined when trying to read the 'title'

Dynamic form groups in Angular: Avoiding the issue of form inputs not binding to form groups

An assortment of diverse data types in TypeScript arrays

What is the best way to develop a function that can take in either a promise or a value and output the same type as the input parameter?

Steps to resolve the error "The value for '--target' option should be one of the following: 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es201', 'esnext'."

Having trouble viewing the initial value in an AngularJS2 inputText field

I am looking to implement tab navigation for page switching in my project, which is built with react-redux and react-router

Integrating JavaScript functions into TypeScript

Retrieving values from a nested array within a JSON object

Is there a way for me to transfer a variable to a URL?