CODEWITHSUNDEEP
genericstypestypescriptdecorator
ianks
ianks

Reputation: 1768

Creating a generic method decorator in Typescript

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

It would work like this:

  1. Decorate a method with something like: @fetchJson<User>
  2. 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'.

Upvotes: 9

Views: 3538

Answers (1)

Amid
Amid

Reputation: 22322

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) 
    {
        //....
    }
}

Upvotes: 8

Related Questions