What is the proper way to specify the type for a proxy that encapsulates a third-party class?

Question

What is the proper way to specify the type for a proxy that encapsulates a third-party class?

I have developed a unique approach to enhancing Firestore's Query class by implementing a Proxy wrapper. The role of my proxy is twofold:

If a function is called on the proxy, which exists in the Query class, the proxy will direct that function call to the Query class.
- If the Query class returns another instance of itself (such as when using .where()), instead of returning the Query instance directly, my proxy envelops it in another layer of proxy.
- On the other hand, if the return type is not another Query instance (for example, with .onSnapshot()), the result is seamlessly passed back to the method caller without additional wrapping.
In addition to forwarding existing methods, my proxy also includes some custom methods for added convenience.

Initially, I defined the type structure as follows:

interface MyInterface { /* custom methods here */ }
type Store = MyInterface & FirebaseFirestore.Query

While this setup allows TypeScript to recognize query-method availability within the store, it does not explicitly convey that all query method return types are encompassed within the Store type. How can I accurately convey this information to TypeScript?

typescript proxy

Answer 1

Answer №1

It seems like a solution along these lines could work for you:

interface DataSnapshot {}

interface Utility {}

interface QueryInterface {
  where(condition: number): QueryInterface;
  onSnapshot(): DataSnapshot;
}

type ProxyHandler<T> = {
  [Key in keyof T]: T[Key] extends (...args: any) => T
    ? (...args: Parameters<T[Key]>) => ProxyHandler<T>
    : T[Key]
};

interface ExtendedProxy {
  newMethod(): Utility;
}

let dynamicProxy: ProxyHandler<QueryInterface> & ExtendedProxy;

dynamicProxy.onSnapshot(); // DataSnapshot
dynamicProxy.where(2); // Proxy<QueryInterface>
dynamicProxy.newMethod(); // Utility

Answer 2

It seems like a solution along these lines could work for you:

interface DataSnapshot {}

interface Utility {}

interface QueryInterface {
  where(condition: number): QueryInterface;
  onSnapshot(): DataSnapshot;
}

type ProxyHandler<T> = {
  [Key in keyof T]: T[Key] extends (...args: any) => T
    ? (...args: Parameters<T[Key]>) => ProxyHandler<T>
    : T[Key]
};

interface ExtendedProxy {
  newMethod(): Utility;
}

let dynamicProxy: ProxyHandler<QueryInterface> & ExtendedProxy;

dynamicProxy.onSnapshot(); // DataSnapshot
dynamicProxy.where(2); // Proxy<QueryInterface>
dynamicProxy.newMethod(); // Utility

What is the proper way to specify the type for a proxy that encapsulates a third-party class?

Answer №1

Similar questions

Troubleshooting npm test failure on CircleCI due to inability to locate installed package

Tips for having tsc Resolve Absolute Paths in Module Imports with baseUrl Setting

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?

Eradicate lines that are empty

Discovering the highest value within an array of objects

How can I enable editing for specific cells in Angular ag-grid?

Discover the outcome of clicking on an object (mock tests)

Using an array of functions in Typescript: A simple guide

Creating Meta tags for Dynamic Routes in a Nuxt 3 Build

When invoking a function within another function, it is essential to ensure that both values are returned within the function

"Dealing with cross-origin resource sharing issue in a Node.js project using TypeScript with Apollo server

Angular Igx-calendar User Interface Component

Is there a way to restrict the return type of a function property depending on the boolean value of another property?

Is there a way to make an angular component reuse itself within its own code?

Issue with action creator documentation not displaying comments

Finding the current URL in React Router can be achieved by using specific methods and properties provided by

405 we're sorry, but the POST method is not allowed on this page. This page does

Change the color of active buttons on dynamically generated buttons

Gather the names of all properties from the filtered objects that meet specific criteria

Transferring 'properties' to child components and selectively displaying them based on conditions