In this code, I am trying to have a user specify a type for generic decorator function fetchJson.
It would work like this:
@fetchJson<User>
.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'.
                In TypeScript, you can create decorators using the special syntax @expression , where expression is a function that will be called automatically during runtime with details about the target of the decorator. The target of a decorator depends on where you add them.
A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression , where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
NOTE: Decorators are an experimental feature and are still in stage 2 in JavaScript, also, experimental in TypeScript, so it might change in the future.
Generics allow creating 'type variables' which can be used to create classes, functions & type aliases that don't need to explicitly define the types that they use. Generics makes it easier to write reusable code.
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) 
    {
        //....
    }
}
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With