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

Simulating TypeDI service behavior in Jest

What factors contribute to 'tslib' having more downloads than 'typecrypt'?

Guide to typing a new version of a function without any optional parameters using a mapped tuple

What is the best way to enable code sharing between two TypeScript projects housed within the same repository?

When a parameter is passed into a React-Query function with an undefined value, it can lead to the API returning a 404 error

Optimizing the sorting of object properties based on specific values (numbers or strings)

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

An error persists in PhpStorm inspection regarding the absence of AppComponent declaration in an Angular module

What are the different ways to customize the appearance of embedded Power BI reports?

The test.ts file does not contain any type definitions

Reactivity in Angular Autocomplete with API Integration

Why is my custom Vuelidate validator not receiving the value from the component where it is being called?

Having trouble updating state with useEffect in a React functional component

Create interfaces for a TypeScript library that is available on npm for export

Fastest method to invoke a potentially undefined function

Outputting double columns with Typescript Sequelize associations

Angular 2 - Dependency Injection failing to function

Using MUI-X autocomplete with TextField disables the ability to edit cells

Checking for the existence of a value in an object using Angular loops

Setting default values and specifying available values for a class property in TypeScript