Creating a generic method decorator in Typescript

Question

In this code, I am trying to have a user specify a type for generic decorator function fetchJson.

It would work like this:

Decorate a method with something like: @fetchJson<User>
We then replace the function with one that automatically calls .then(res => res.json()), and give back a typed value wrapped in a Promise.

The issue I am running into is that I do not know how to assign the return descriptor.value to a user-assigned T. Is there a better way to do this? I feel like I am missing something entirely.

interface PromiseDescriptorValue<T>{
  (...args: any[]): Promise<T>;
}

const fetchJson = <T>(
  target: Object,
  propertyKey: string,
  descriptor: TypedPropertyDescriptor<PromiseDescriptorValue<Response>> // Response is a whatwg-fetch response -- https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/whatwg-fetch/whatwg-fetch.d.ts#L58
): TypedPropertyDescriptor<PromiseDescriptorValue<T>> => {
  const oldMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    return oldMethod.apply(this, args).then((res: Response) => res.json());
  };

  return descriptor;
};


// TS2322: Type 'TypedPropertyDescriptor<PromiseDescriptorValue<Response>>'
// is not assignable to type
// 'TypedPropertyDescriptor<PromiseDescriptorValue<T>>'. Type
// 'PromiseDescriptorValue<Response>' is not assignable to type
// 'PromiseDescriptorValue<T>'. Type 'Response' is not assignable to type 'T'.

Amid · Accepted Answer · 2016-01-12 11:11:43Z

8

+25

Maybe something like this:

interface PromiseDescriptorValue<T>{
  (...args: any[]): Promise<T>;
}

export function fetchJson<T>(): any
{
    return (
        target: Object,
        propertyKey: string,
        descriptor: any): TypedPropertyDescriptor<PromiseDescriptorValue<T>> => 
        {
        const oldMethod = descriptor.value;

        descriptor.value = function(...args: any[]) 
        {
            return oldMethod.apply(this, args).then((res: Response) => res.json());
        };

        return descriptor;
        };
}

class C 
{
    @fetchJson<User>()
    foo(args) 
    {
        //....
    }
}

answered Jan 12, 2016 at 11:11

Amid

22.5k6 gold badges63 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a generic method decorator in Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related