Using TypeScript to wrap a class with a Proxy object

Question

Using TypeScript to wrap a class with a Proxy object

I've been working on a function that takes an API interface (I've provided a sample here) and creates a Proxy around it. This allows me to intercept calls to the API's methods, enabling logging, custom error handling, etc. I'm running into some issues with types that are causing headaches. While similar in concept to another question I posted (Writing wrapper to third party class methods in TS), this approach is different based on feedback I received.

Currently, I'm facing an error message:

Element implicitly has an 'any' type because expression of type 'string | symbol' can't be used to index type 'API'. No index signature with a parameter of type 'string' was found on type 'API'

. It makes sense since sayHello isn't strictly considered a string in TypeScript, but I'm unsure of the best way to access methods on this class without using property accessor notation.

class API {
 sayHello(name: string) {
     console.log(“hello “ + name)
     return name

  }
}

export default <T extends API>(
  api: T,
) =>
  new Proxy(api, {
    get(target, prop) {
      if (typeof target[prop] !== "function") { 
        return target[prop]; 
      }
      return async (...args: Parameters<typeof target[prop]>) => {

        try {
          const res = await target[prop](...args); 
         
          return res
        } catch (e) {
          
        }
      };
    },
  });

Can this be achieved in TypeScript?

javascript typescript typescript-generics

Answer 1

Answer №1

In TypeScript currently, there is no support for handling cases where a Proxy object has a different type from its target object. This issue has been raised as a feature request on the official GitHub repository and it's unsure when or if this situation will be addressed.

As a workaround, if you need to achieve this behavior, you'll have to manually specify the expected return type of your proxy function and make use of type assertions within the implementation to suppress any potential errors. The responsibility of ensuring type safety will lie with you, as the compiler won't offer much assistance in this scenario.

One possible solution can be written as follows:

const prox = <T extends API>(api: T) => new Proxy(api, {
  get(target: any, prop: string) {
    if (typeof target[prop] !== "function") {
      return target[prop];
    }
    return async (...args: any) => {
      try {
        const res = await target[prop](...args);
        return res;
      } catch (e) { }
    };
  },
}) as any as { [K in keyof T]: AsyncifyFunction<T[K]> };

type AsyncifyFunction<T> = T extends (...args: infer A) => infer R ?
  (...args: A) => Promise<Awaited<R>> : T;

The concept here is that calling `prox(api)` will produce a modified version of the original `api` object where non-function properties remain unchanged but all function properties are transformed into asynchronous versions that return Promises. If the type of `api` is `T`, then `prox(api)` becomes a mapped type `{ [K in keyof T]: AsyncifyFunction<T[K]> }`, with `AsyncifyFunction<T>` being a conditional utility type that handles the transformation of each property type.

We can now test this implementation:

class Foo extends API {
  str = "abc";
  double(x: number) { return x * 2 };
  promise() { return Promise.resolve(10) };
}
const y = prox(new Foo());
/* const y: {
    str: string;
    double: (x: number) => Promise<number>;
    promise: () => Promise<number>;
    sayHello: (name: string) => Promise<void>;
} */

According to the compiler, the variable `y` includes a property `str` of type `string`, along with other properties which are asynchronous methods returning promises. Notably, the method `promise()` returns `Promise<number>` instead of `Promise<Promise<number>>`.

To verify functionality, let's proceed with some demonstration:

console.log(y.str.toUpperCase()) // "ABC"
y.sayHello("abc") // "helloabc"
y.double(123).then(s => console.log(s.toFixed(2))) // "246.00"
y.promise().then(s => console.log(s.toFixed(2))) // "10.00"

All seems in order!

Link to Playground for testing

Answer 2

In TypeScript currently, there is no support for handling cases where a Proxy object has a different type from its target object. This issue has been raised as a feature request on the official GitHub repository and it's unsure when or if this situation will be addressed.

As a workaround, if you need to achieve this behavior, you'll have to manually specify the expected return type of your proxy function and make use of type assertions within the implementation to suppress any potential errors. The responsibility of ensuring type safety will lie with you, as the compiler won't offer much assistance in this scenario.

One possible solution can be written as follows:

const prox = <T extends API>(api: T) => new Proxy(api, {
  get(target: any, prop: string) {
    if (typeof target[prop] !== "function") {
      return target[prop];
    }
    return async (...args: any) => {
      try {
        const res = await target[prop](...args);
        return res;
      } catch (e) { }
    };
  },
}) as any as { [K in keyof T]: AsyncifyFunction<T[K]> };

type AsyncifyFunction<T> = T extends (...args: infer A) => infer R ?
  (...args: A) => Promise<Awaited<R>> : T;

The concept here is that calling `prox(api)` will produce a modified version of the original `api` object where non-function properties remain unchanged but all function properties are transformed into asynchronous versions that return Promises. If the type of `api` is `T`, then `prox(api)` becomes a mapped type `{ [K in keyof T]: AsyncifyFunction<T[K]> }`, with `AsyncifyFunction<T>` being a conditional utility type that handles the transformation of each property type.

We can now test this implementation:

class Foo extends API {
  str = "abc";
  double(x: number) { return x * 2 };
  promise() { return Promise.resolve(10) };
}
const y = prox(new Foo());
/* const y: {
    str: string;
    double: (x: number) => Promise<number>;
    promise: () => Promise<number>;
    sayHello: (name: string) => Promise<void>;
} */

According to the compiler, the variable `y` includes a property `str` of type `string`, along with other properties which are asynchronous methods returning promises. Notably, the method `promise()` returns `Promise<number>` instead of `Promise<Promise<number>>`.

To verify functionality, let's proceed with some demonstration:

console.log(y.str.toUpperCase()) // "ABC"
y.sayHello("abc") // "helloabc"
y.double(123).then(s => console.log(s.toFixed(2))) // "246.00"
y.promise().then(s => console.log(s.toFixed(2))) // "10.00"

All seems in order!

Link to Playground for testing

Answer 3

Answer №2

If you want to enhance your class, consider incorporating an index signature like this:

class Data {

 /* -- index signature -- */
 [index:string|symbol]: any;

 showInfo(info: string) {
    console.log("displaying info" + info)
  }
}

export default <T extends Data>(
  data: T,
) =>
  new Proxy(data, {
    get(target, property) {
      if (typeof target[property] !== "function") {
        return target[property];
      }

      /* -- need to save it in a variable -- */
      const func = target[property];

      return async (...args: Parameters<typeof func>) => {

        try {
          const result = await target[property](...args);
          // perform operations
          return result.data;
        } catch (error) {
          // handle exceptions
        }
      };
    },
  });

Answer 4

If you want to enhance your class, consider incorporating an index signature like this:

class Data {

 /* -- index signature -- */
 [index:string|symbol]: any;

 showInfo(info: string) {
    console.log("displaying info" + info)
  }
}

export default <T extends Data>(
  data: T,
) =>
  new Proxy(data, {
    get(target, property) {
      if (typeof target[property] !== "function") {
        return target[property];
      }

      /* -- need to save it in a variable -- */
      const func = target[property];

      return async (...args: Parameters<typeof func>) => {

        try {
          const result = await target[property](...args);
          // perform operations
          return result.data;
        } catch (error) {
          // handle exceptions
        }
      };
    },
  });

Using TypeScript to wrap a class with a Proxy object

Answer №1

Answer №2

Similar questions

"Introducing the new Next.Js 14 sidebar featuring a sleek hamburger menu

What steps should I take to create a React component in Typescript that mimics the functionality of a traditional "if" statement?

Having trouble with basic authorization for Facebook API using JavaScript?

Add both single (' ') and double (" ") quotes within the `document.querySelector` code

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

What steps can be taken to ensure that any new elements generated by JavaScript do not disappear upon refreshing the page

Duplicating labels with JavaScript

Submitting forms that contain files using jQuery and AJAX

What is the best way to add bold formatting to text enclosed in parentheses using javascript/jquery?

A guide on implementing Angular-DataTable within a TypeScript project

Add the component view to the webpage's body section

Stop the stream coming from getUserMedia

Enhancing button functionality using jQuery and JavaScript for toggling behavior

Update class name in React component based on state change

How can Vue handle passing an array in this scenario?

Utilize Ajax datatable to showcase information in a visually interactive format

Attempting the transformation of jQuery ajax requests to Angular's http service

Executing the routing component prior to any other tasks

Deciding whether an altered image has been successfully loaded

Is there a way to set the submitted variable to true when the form group is submitted, then revert it to false when the user makes changes to the form?